Page 1 of 1
Change / Add background image to default theme
Posted: Sat Jul 28, 2012 8:35 pm
by connex
Hy there for all,
First of all i must tell you that i am new OpenCart user and i am not an advanced coder. Just know a few things about CSS and almost nothing about php. But i always have google to learn.
So i have downloaded the last version of OpenCart and installed it on my computer and run it with WampServer.
Everithing is ok, util i have decided to change the background for my online store. I edited the css file, but all i could do was to change the color but not add a image.
Looked in other stores for examples bot nothing worked. So now i am stucked with that white background.
I would apreciate any type of help. Please...
**later edit: I forgot to tell you that i am using the default opencart theme where the css file does not have a image as background. this is the hard part 'cause if the them was using a image the solution would have been simple, replacing the image.....but the only code there is for the color.
Re: Change / Add background image to default theme
Posted: Sat Jul 28, 2012 10:28 pm
by mcamca
In:
catalog/view/theme/yourtheme/stylesheet/stylesheet.css
Instead of:
use:
Code: Select all
body {
background: #ffffff url('../image/your_background.jpg');
where: your_background.jpg is the name of the image you want to use!
Upload your image to folder:
catalog/view/theme/yourtheme/image/
Re: Change / Add background image to default theme
Posted: Sun Jul 29, 2012 5:15 pm
by connex
Thank you mcamca.
I tryed with the code you gaved me several times. The thing is that i was not replacing the color option with the backgraound as a image option and i think this is why the white background was there everytime over my actual bg.
Just made the replacement instead of just adding and nou it-s there. I have my background.
Thank you verry much. Best wishes.
Re: Change / Add background image to default theme
Posted: Sun Oct 07, 2012 7:42 pm
by DanGee
this does not work for me.....
I am using the latest version of opencart and the default theme.
http://www.dawnofenlightenment.co.uk/im ... tlarge.jpg is the pic I want to use
Re: Change / Add background image to default theme
Posted: Fri Jan 04, 2013 9:34 pm
by ThePath
You can do all this and more with my Theme Options Module:
http://www.opencart.com/index.php?route ... on_id=9927
Cheers
Re: Change / Add background image to default theme
Posted: Wed Feb 06, 2013 3:30 pm
by gauravdave2802
body {
background-repeat: no-repeat;
background: #ffffff url('../image/b1.png');
font-family: Arial, Helvetica, sans-serif;
margin: 0px;
padding: 0px;
}
Done this, still not getting the background wallpaper. Please help
Re: Change / Add background image to default theme
Posted: Wed Feb 06, 2013 8:30 pm
by connex
thanks!
Re: Change / Add background image to default theme
Posted: Mon Apr 01, 2013 11:20 pm
by WillBigGunDigital
You have to reference the path of your new theme in the header.tpl (YourTheme/template/common/header.tpl)
replace the default CSS
Code: Select all
<link rel="stylesheet" type="text/css" href="catalog/view/theme/default/stylesheet/stylesheet.css" />
with YourTheme CSS
Code: Select all
<link rel="stylesheet" type="text/css" href="catalog/view/theme/*YOUR-THEME*/stylesheet/stylesheet.css" />
Re: Change / Add background image to default theme
Posted: Sat Oct 08, 2016 10:52 pm
by massque69
When using the default theme the code looks like this:
body {
font-family: 'Open Sans' , sans-serif;
font-weight: 400;
color: #666;
font-size: 12px;
line-height: 20px;
width: 100%;
background: url('../../../../../image/***your_image_name***.png') no-repeat;
background-size: 100%;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
}
Re: Change / Add background image to default theme
Posted: Mon Oct 17, 2016 4:29 am
by schweps
I couldn't get an image to load too. The problem for me was that somehow the path to the directory of the background image was incorrect.
Typing exact path to the image file using folder names like that " background: url('/folder_name/folder_name/folder_name/image/name.png'); " was not recognized.
The solution that worked for me was changing "folder_name" to "/.." . Notice that each "/.." brings back one level up in direcotory.
For given example above try typing this: " background: url('/../../../image/name.png'); ".
Hope this helps!