Change Opencart Background to an Image

Asked by:
Mystore / 53 Points
2014-02-26 7:53 pm EST
Opencart 15
Could you please let me know step by step how can I change my store background to an image? I currently have a simple color background but I would like to replace it with a picture background. I use Opencart with default theme. Thanks!

To ask this user for more information, please first login.

To submit an answer, please login.

Best answer chosen by User


12,039 Points
2014-03-03 11:14 am EST
Hello Mystore,

I looked in the code for your stylesheet (located here:/catalog/view/theme/default/stylesheet/stylesheet.css), and did not see any lines for: background-image

As a test I added the following lines, and your background image appeared:

background-image: url('/catalog/view/theme/default/image/ROSE.jpg');
background-repeat: repeat|repeat-x|repeat-y;

I left the lines there, so you can see; but commented them out with a # at the beginning of each line. If you delete the # symbol it will work.

You may have to clear your browser cache, before you can view it.

If you have any further questions, feel free to post them below.
Thank you,


To submit a comment on this answer, please first login.

Thank you so much for the help, everything is working now! What I was doing wrong was missing wordin of "background-image" and also I was missing background-repeat.
53 Points

2014-03-03 2:04 pm EST



3,713 Points
2014-02-26 8:43 pm EST
Hello Mystore, and thanks for your question.

Yes you can change your OpenCart store background to an image. We actually have an in-depth guide on changing the background image in OpenCart that explains the full process.

Basically you'd just want to edit your stylesheet.css file that should be inside your /catalog/view/theme/default/ directory.

That file should have a line like:
background-color: #000000;

You could change it to something like:
background-image: url('/help/my-background.png');
background-repeat: no-repeat;
background-color: #000000;

Please let us know if you had any further questions at all.

- Jacob

To submit a comment on this answer, please first login.

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!
53 Points

2014-02-26 11:46 pm EST
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:

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

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
3,713 Points
2014-02-27 3:58 am EST
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?

53 Points

2014-02-28 1:34 am EST
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.
2,342 Points
2014-02-28 8:54 am EST
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.
53 Points

2014-02-28 8:06 pm EST
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:


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!

Arnel C.

16,417 Points
2014-02-28 11:13 pm EST
Thanks for your response! Not sure what I`m doing wrong but all I got was white screen. This is what I put in stylesheet.css
body {

background-repeat: no-repeat;

background-color: #9E039C;
color: #000000;
Is there anything that I need to add more or delete something?
Thanks again!
53 Points

2014-03-02 9:24 pm EST
Want to share this Question?

Related Articles

It looks like there are no related articles.
Would you like to ask a question about this page? If so, click the button below!

Help Center Search

Current Customers

Email: Ticket: Submit a Support Ticket
Call: 877-595-4HUB (4482)
757-416-6627 (Intl.)
Chat: Click To Chat Now

Ask the Community

Get help with your questions from our community of like-minded hosting users and Web Hosting Hub Staff.

Not a Customer?

Get web hosting from a company that is here to help.