OSCOMMERCE SUPPORT CALL 702-453-3332
 

Help - Search - Members - Calendar
Full Version: Adding a background image to the whole site.
osCommerce Community Support Forums > osCommerce Online Merchant v2.x > Tips and Tricks
jpeiji
Mar 1 2005, 04:20 PM
I've tried to find the answer to this question through the documentation and previous posts. I just can't seem to find it. Any help? I'm a novice to php and to osCommerce.
ldavies83
Mar 1 2005, 04:25 PM
QUOTE (jpeiji @ Mar 1 2005, 04:20 PM)
I've tried to find the answer to this question through the documentation and previous posts. I just can't seem to find it. Any help? I'm a novice to php and to osCommerce.
*

In the CSS file for the site under body, add the lines similar to below, obviously changing the relevant code

QUOTE
BODY {
background-image : url(/images/dragonbg.gif);
background-repeat : no-repeat;
background-position : 50% 50%;
background-attachment : fixed;
color : #000000;
margin : 0;
}
jpeiji
Mar 1 2005, 04:37 PM
Thanks a ton.
Just one question. What does "background-position : 50% 50%" mean?
jpeiji
Mar 1 2005, 05:09 PM
hmmm. I tried that and the only thing that changes is the body text. Are you sure "BODY" is the right style for the background?
jpeiji
Mar 1 2005, 05:17 PM
nevermind. I figured it out. Thanks for your help.
Laney
Mar 15 2005, 03:18 PM
QUOTE (ldavies83 @ Mar 1 2005, 12:25 PM)
In the CSS file for the site under body, add the lines similar to below, obviously changing the relevant code
*


I did that, but still the image doesn't show. I know I have something that needs to be edited in the css file, but I just can't find it... I changed the background colours from white to a sand colour, but I still get white in the middle of the page, so I am assuming that's the same problem with showing the background image.

Can you take a look at the page and tell me what I need to change:
http://store.meaningfulscraps.com/main/index.php

thank you very much!

Elaine
shopkeper
Apr 15 2005, 03:18 PM
QUOTE (ldavies83 @ Mar 1 2005, 10:25 AM)
In the CSS file for the site under body, add the lines similar to below, obviously changing the relevant code
*



I have changed stylesheet.css to

BODY {
background-image : url(/images/pc27.jpg);
background-repeat : no-repeat;
background-position : 50% 50%;
background-attachment : fixed;
color : #000000;
margin : 0;
}

and

BODY {
background-image : /images/pc27.jpg;
background-repeat : no-repeat;
background-position : 50% 50%;
background-attachment : fixed;
color : #000000;
margin : 0;
}

and my background image still does not display. Any suggetions?
Thanks,
Matt
shopkeper
Apr 15 2005, 04:01 PM
QUOTE (shopkeper @ Apr 15 2005, 09:18 AM)
I have changed stylesheet.css to

BODY {
background-image : url(/images/pc27.jpg);
background-repeat : no-repeat;
background-position : 50% 50%;
background-attachment : fixed;
color : #000000;
margin : 0;
}

and

BODY {
background-image : /images/pc27.jpg;
background-repeat : no-repeat;
background-position : 50% 50%;
background-attachment : fixed;
color : #000000;
margin : 0;
}

and my background image still does not display.  Any suggetions?
Thanks,
Matt
*



I have found the problem:
the url needed a single quote around it like below.

background-image: url('images/some_graphic.gif');

Matt
osfalcon
Jul 24 2005, 05:26 AM
how would you add a .swf file / flash?


background-image: url('images/some_graphic.gif');
Stevis2002
Jul 24 2005, 11:58 AM
Just an extended question on this subject..

Is there a way to make the background image, say, 60% transparent, like a tracing image in DWeaver?

Thanks,
Steve

BTW...for flash image, see the contribution list for adding flash to osc.
Vger
Jul 24 2005, 01:01 PM
QUOTE
Is there a way to make the background image, say, 60% transparent


You can use the 'opacity' style, but remember that it is poorly supported by some browsers - and each browser that does recognise it uses it differently. It would be much easier to save the image with the opacity built into it in the first place.

Vger
jlh42581
Aug 9 2005, 04:38 PM
QUOTE (Stevis2002 @ Jul 24 2005, 07:58 AM)
Just an extended question on this subject..

Is there a way to make the background image, say, 60% transparent, like a tracing image in DWeaver?

Thanks,
Steve

BTW...for flash image, see the contribution list for adding flash to osc.
*


Use photoshop to make the image as transparent as you want it. Make sure you save it as a gif because thats the only way to preserve transparancy, i beleve theres an option also needing checked to do this. If you want to lay it over a color your most likely going to have to create a table class and use this inside the <body><table class="bodytransparency"><tr><td> tags in the code. or just create your color for your page as another layer before saving... Many ways this "could" be done
Iniquityclothing
Oct 15 2006, 07:35 PM
my image still will not display on my site, all i get is a plain white BG and my text has changed to Times New Roman?? any suggetsions, this is the code i have
BODY {
background-image : url('/www/images/metal013.gif);
background-repeat : no-repeat;
background-position : 50% 50%;
background-attachment : fixed;
color : #000000;
margin : 0;
}
sue76
Oct 19 2006, 05:58 AM
QUOTE (ldavies83 @ Mar 2 2005, 12:25 AM) *
In the CSS file for the site under body, add the lines similar to below, obviously changing the relevant code



hihi... may I know where can I find for the CSS file...... sorry because I still newbie here....
rodrigue
Oct 24 2006, 09:01 AM
QUOTE (Iniquityclothing @ Oct 15 2006, 07:35 PM) *
my image still will not display on my site, all i get is a plain white BG and my text has changed to Times New Roman?? any suggetsions, this is the code i have
BODY {
background-image : url('/www/images/metal013.gif);
background-repeat : no-repeat;
background-position : 50% 50%;
background-attachment : fixed;
color : #000000;
margin : 0;
}


I am using MS 2. I have got the same result using the code above. is there some one who can advice ? Thanks in advance.
empirical
Oct 26 2006, 01:02 AM
This might be dumb but I searched for this same topic and had everything correct. BUT. I forgot to upload my picture to the web server. Lol. Make sure you do that!!! Lol.
pmarfell
Oct 26 2006, 10:23 AM
QUOTE (Iniquityclothing @ Oct 15 2006, 08:35 PM) *
my image still will not display on my site, all i get is a plain white BG and my text has changed to Times New Roman?? any suggetsions, this is the code i have
BODY {
background-image : url('/www/images/metal013.gif);
background-repeat : no-repeat;
background-position : 50% 50%;
background-attachment : fixed;
color : #000000;
margin : 0;
}

Is the problem that it is not finding the image file? Should it have the www? You could probably check by using a full absolute address
CODE
http://<yoursite>/<osCommerce directory>/images/metal013.gif
If that works you can then start removing the front section to give you a relative link.
drumcentral
Nov 8 2006, 09:31 PM
Hi All,

I have managed to change the background for my site to a pic, but the problem now, is that the pop-up images ALSO have the background image behind them, which I don't really want.

Is there a way to stop this?
Is it in the javascript or would I have to edit the stylesheet?

Many thanks

Kenny
matrix2223
Nov 18 2006, 11:46 PM
for the image in the background it should be like this in the stylesheet.css

BODY {
background-image: url('/images/your_image.gif');
background-repeat: repeat;
background-position: center;
}

That is if your catalog is in the root dir if not and you like www.yoursite.com/catalog/ then it would this path '/catalog/images/your_image.gif'
sappura
Dec 2 2006, 01:05 AM
QUOTE (matrix2223 @ Nov 18 2006, 03:46 PM) *
for the image in the background it should be like this in the stylesheet.css

BODY {
background-image: url('/images/your_image.gif');
background-repeat: repeat;
background-position: center;
}

That is if your catalog is in the root dir if not and you like www.yoursite.com/catalog/ then it would this path '/catalog/images/your_image.gif'



I removed the extra / form it and now it works great!
It it this one marked in red ('/ images/your_image.gif');

BODY {
background-image: url('images/bg_snow.jpg');
background-repeat: repeat;
background-position: center;
}

I hope that helps....Satu
mirs7
Dec 13 2006, 07:30 PM
Ihad in the first time gotten the bg in my store through the stylesheet.css. then I wanted to chnage a color of a navigation bar and went in the Stylesheet manager. now I can not get back into my stylesheet.css under catalog. the permission are all in black and can not be changed and so is the owner name which instead of being mine now says www. Can anyone help? I want my background back.

Now I did find a stylesheet.css under /admin/includes/ that i can get into but it is not changing anything.

Thank you for any help. Kami
BillinDetroit
Jan 13 2007, 07:36 AM
QUOTE (Iniquityclothing @ Oct 15 2006, 02:35 PM) *
my image still will not display on my site, all i get is a plain white BG and my text has changed to Times New Roman?? any suggetsions, this is the code i have
BODY {
background-image : url('/www/images/metal013.gif);
background-repeat : no-repeat;
background-position : 50% 50%;
background-attachment : fixed;
color : #000000;
margin : 0;
}



I'm no guru, but shouldn't there be a closing quote on the image url?
courtfool
Nov 17 2007, 06:21 AM
QUOTE (sappura @ Dec 2 2006, 01:05 AM) *
I removed the extra / form it and now it works great!
It it this one marked in red ('/ images/your_image.gif');

BODY {
background-image: url('images/bg_snow.jpg');
background-repeat: repeat;
background-position: center;
}

I hope that helps....Satu



I have gotten my image to appear but I am trying to creat a different effect. I am using a background .gif with transparency. but it is showing a white background behind the .gif I am using.

http://partnersiniron.com/index.php?option...er&Itemid=8

I am trying to be consistant with the site but having a problem with this area. does anyone have any ideas?

BODY {
background-image : url('/images/osbackground.gif');
background-repeat : repeat;
background-position : center;
background-attachment : fixed;
color : #000000;
margin : 0;
}
this is my code
raybeam
Apr 13 2008, 01:58 AM
Great post. I managed to add a background image to my shop.. But I've encountered a new problem also..

Now it looks like this! :


as you see half of the box is transparent... Help please? wink.gif
raybeam
Apr 13 2008, 09:23 PM
I've solved the problem. If anyone else encounters it in the future, here's the solution:
I just changd the background to #000000 in
.productListing-heading
TD.productListing-data

And then I changed border-spacing to 0px in TABLE.productListing.

Sweet smile.gif
Aye Poppin
Apr 19 2008, 08:01 PM
I have my background image but I want to reverse the repeat image. Tried a few things-any suggestions?
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2008 Invision Power Services, Inc.