Thanks for the answer! I did not have any luck.
WhenI placed
background-image: url('/help/my-background.png') where I replaced my-background.png with my picture name as it is saved under Imgae then my background turned white.
When I placed background-image: url('../catalog/view/theme/default/image/background-my picture then my site was lost.
Could you please let me know what exactly I have to type in in order to replace my background? How can I change picture sizing in CSS? Thanks!

Hello again Mystore,

No problem at all. Sorry to hear you're still having some issues getting the background image to work. The path for your my-background.png image as in my example would need to point to the path of the image you'd like to use for the background.

If you're having issues using another path such as ../catalog/view/theme/default/image/, you need to ensure that the image you're pointing to actually exists there.

It's a little hard to judge what your exact path should be without seeing the OpenCart site. It could be different based on the theme you're running or your installation path. But I think you're on the right path, we might just have a typo in our article about this. It looks like we had:

url('../catalog/view/theme/default/image/background-bw-2.png

You need to make sure that you are closing the url( setting. So it actually should look like:

url('../catalog/view/theme/default/image/background-bw-2.png')

Of course the background-bw-2.png file should actually be the name of the image you have on your site.

If you want to change picture sizing in CSS you would use the width:, or height: CSS rules for your image. After that you would either type a pixel size you'd like the image to be, or a percentage of the original image size.

<img style="width: 50px;" src="/help/image.png">

<img style="width: 50%;" src="/help/image.png">

If you are trying to resize a background image, the rules are a bit different, but you'd want to utilize these:

background-size: 300px 120px;

background-repeat: no-repeat;

background-position: 0px 0px;

This would size your background image to 300 x 120px, the background-repeat rule allows you to control if the image repeats which is on by default, you can turn it off with no-repeat, or limit it horizontally with repeat-x or vertically with repeat-y.

The background-position rule allows you to position the image on your background. Setting it to 0px 0px would have your background image at the top-left corner of your page, and using 50% 0px would center the image horizontally on the page at the top.

Hope that helps, let us know if you had any other questions.

- Jacob

Thank you for your response!
I placed url('../catalog/view/theme/default/image/mypicture.jpg')
background-size: 300px 120px;
background-repeat: no-repeat;
but no luck. Not sure where the problem is. I`ll have to submit a ticket for help. I was wondering could it depend from my picture size or it doesn`t matter and you can adjust it later in CSS?

From taking a look at your account, there is not a file named mypicture.jpg so it is unable to load an image for it. You will need to upload an image with this file name to the appropriate directory stated.

Sorry, mypicture.jpg I meant as example. My actual image name that I was trying to load is Rose.jpg
I also contacted support via email and was told that there is no way to change background image with exsisting template. I would have to use a new blank template and start all over even with adding products. Hope you have another solution that you would suggest. From first answer I understood that it is possible with current template and hope to change my background without rebuilding my store.

Hello Mystore,

Sorry for the frustration with the background image!!! I see that you've also been talking with our tech support team. They may not be able to answer questions of this nature (where you're modifying an application setting for a third-party developed software like OpenCart). Fortunately, the Community Support team can research this issue for you, and as per Jacob's comment in the beginning, this specific change is possible.

The problem that you're probably having has to do with the file name itself. You mentioned that it was Rose.jpg. In a Linux server, such as the one hosting your website, it's very important to make sure that the case for the letters spelling your file name is correct for all the letters in the file name. I looked at your account and found that the actual file name is ROSE.jpg. You need to make sure that your file name change uses that exact spelling and capitalization. Otherwise, it will not be found. Try making this change and hopefully, your image will now appear. Here's the path (with the correct file name) once more:

../catalog/view/theme/default/image/ROSE.jpg

I hope this finally provides resolution to your problem. When I checked to see if the image would appear with your URL, I could see the pink rose. Please let us know if you need any further assistance!

Regards,
Arnel C.