Post by connex » Sat Jul 28, 2012 8:35 pm

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.

Newbie

Posts

Joined
Sat Jul 28, 2012 8:26 pm

Post by mcamca » Sat Jul 28, 2012 10:28 pm

In:
catalog/view/theme/yourtheme/stylesheet/stylesheet.css
Instead of:

Code: Select all

body {
background-color: #ffffff;
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/

User avatar
Active Member

Posts

Joined
Fri Aug 06, 2010 5:57 pm

Post by connex » Sun Jul 29, 2012 5:15 pm

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.

Newbie

Posts

Joined
Sat Jul 28, 2012 8:26 pm

Post by DanGee » Sun Oct 07, 2012 7:42 pm

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

Newbie

Posts

Joined
Sun Oct 07, 2012 7:33 pm

Post by ThePath » Fri Jan 04, 2013 9:34 pm

You can do all this and more with my Theme Options Module: http://www.opencart.com/index.php?route ... on_id=9927

Cheers

Image

OpenCart Theme Options - See All My Extensions - OpenCart Themes and Mods


User avatar
Active Member

Posts

Joined
Fri Jun 26, 2009 11:53 pm
Location - Scotland

Post by gauravdave2802 » Wed Feb 06, 2013 3:30 pm

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


Posts

Joined
Mon Dec 24, 2012 8:01 pm

Post by connex » Wed Feb 06, 2013 8:30 pm

thanks!

Newbie

Posts

Joined
Sat Jul 28, 2012 8:26 pm

Post by WillBigGunDigital » Mon Apr 01, 2013 11:20 pm

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


Posts

Joined
Mon Apr 01, 2013 10:56 pm

Post by massque69 » Sat Oct 08, 2016 10:52 pm

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%;
}

Newbie

Posts

Joined
Sat Oct 08, 2016 10:51 pm

Post by schweps » Mon Oct 17, 2016 4:29 am

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!

Newbie

Posts

Joined
Mon Oct 17, 2016 4:18 am
Who is online

Users browsing this forum: No registered users and 16 guests