Change Opencart Background to an Image

Asked by:
Mystore / 53 Points
Time:
2014-02-27 3:53 am EST
Category:
Opencart 15
Hits:
6,686
Hello!
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

0

johnpaulb-whh2
Staff
12,339 Points
2014-03-03 7:14 pm 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,

-John-Paul

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.
Mystore
53 Points

2014-03-03 10:04 pm EST

ANSWERS

0

JacobN
Staff
3,713 Points
2014-02-27 4:43 am 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!
Mystore
53 Points

2014-02-27 7:46 am 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:
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
JacobN
3,713 Points
Staff
2014-02-27 11: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?

Mystore
53 Points

2014-02-28 9: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.
JeffMa
2,342 Points
Staff
2014-02-28 4:54 pm 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.
Mystore
53 Points

2014-03-01 4:06 am 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:

../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.

arnelc
17,314 Points
Staff
2014-03-01 7:13 am 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 {
url('../catalog/view/theme/default/image/ROSE.jpg')

background-repeat: no-repeat;

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

2014-03-03 5:24 am 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!
Need More Help?

Help Center Search

Current Customers

Email: support@WebHostingHub.com 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.
}