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