Jump to content

Archived

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

jpeiji

Adding a background image to the whole site.

Recommended Posts

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.

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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. "

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
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;

}


View recent 'helpfull' threads:

 

403 Error problems | Ultimate SEO (contribution support)

Share this post


Link to post
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....

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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


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

Share this post


Link to post
Share on other sites

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'


Eric

 

Keep up on osCommerce changes and updates at

Github | Understand osCommerce a little further at OsCommerce Documentation | Copy and paste your error message in Google add "in osCommerce" at the end to get relevant answers to most issues.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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'm no guru, but shouldn't there be a closing quote on the image url?


Wooden stuff.

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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? ;)

Share this post


Link to post
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 :)

Share this post


Link to post
Share on other sites

×