Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Adding a background image to the whole site.


jpeiji

Recommended Posts

  • Replies 68
  • Created
  • Last Reply
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

 

BODY {

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

background-repeat : no-repeat;

background-position : 50% 50%;

background-attachment : fixed;

color : #000000;

margin : 0;

}

Contribs Written: Nochex APC Payment Module, Cheque Payment Module

Contribs Updated: Information Pages Unlimited, Latest News V1

You've gotta be Quick on the Draw in this game!

Link to comment
Share on other sites

  • 2 weeks later...
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

"There are only 10 types of people in this world: those who understand binary, and those who don't. "

Link to comment
Share on other sites

  • 5 weeks later...
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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 3 months later...

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 3 weeks later...
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

Link to comment
Share on other sites

  • 1 year later...

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;

}

View recent 'helpfull' threads:

 

403 Error problems | Ultimate SEO (contribution support)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

http://<yoursite>/<osCommerce directory>/images/metal013.gif

If that works you can then start removing the front section to give you a relative link.

Link to comment
Share on other sites

  • 2 weeks later...

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

--------------------------------------------------------------------------------------------------

Link to comment
Share on other sites

  • 2 weeks later...

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'

Link to comment
Share on other sites

  • 2 weeks later...
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

Link to comment
Share on other sites

  • 2 weeks later...

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

Link to comment
Share on other sites

  • 5 weeks later...
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?

Link to comment
Share on other sites

  • 10 months later...
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

Link to comment
Share on other sites

  • 4 months later...

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! :

l_c70bd91090b8d25bdfbf6896a4f71334.jpg

 

as you see half of the box is transparent... Help please? ;)

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...