Jump to content



* * * * * 1 votes

Adding a background image to the whole site.


This topic has been archived. This means that you cannot reply to this topic.
68 replies to this topic

#-19   jpeiji

jpeiji
  • Members
  • 20 posts

Posted 01 March 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.

#-18   ldavies83

ldavies83
  • Members
  • 114 posts

Posted 01 March 2005 - 04:25 PM

jpeiji, on Mar 1 2005, 04:20 PM, said:

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.

<{POST_SNAPBACK}>

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

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!

#-17   jpeiji

jpeiji
  • Members
  • 20 posts

Posted 01 March 2005 - 04:37 PM

Thanks a ton.
Just one question. What does "background-position : 50% 50%" mean?

#-16   jpeiji

jpeiji
  • Members
  • 20 posts

Posted 01 March 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?

#-15   jpeiji

jpeiji
  • Members
  • 20 posts

Posted 01 March 2005 - 05:17 PM

nevermind. I figured it out. Thanks for your help.

#-14   Laney

Laney
  • Members
  • 210 posts

Posted 15 March 2005 - 03:18 PM

ldavies83, on Mar 1 2005, 12:25 PM, said:

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

<{POST_SNAPBACK}>


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

#-13   shopkeper

shopkeper
  • Members
  • 31 posts

Posted 15 April 2005 - 03:18 PM

ldavies83, on Mar 1 2005, 10:25 AM, said:

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

<{POST_SNAPBACK}>



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

#-12   shopkeper

shopkeper
  • Members
  • 31 posts

Posted 15 April 2005 - 04:01 PM

shopkeper, on Apr 15 2005, 09:18 AM, said:

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

<{POST_SNAPBACK}>



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

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

Matt

#-11   osfalcon

osfalcon
  • Members
  • 47 posts

Posted 24 July 2005 - 05:26 AM

how would you add a .swf file / flash?


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

#-10   Stevis2002

Stevis2002
  • Members
  • 225 posts

Posted 24 July 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.

#-9   Vger

Vger
  • Members
  • 16,978 posts

Posted 24 July 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

#-8   jlh42581

jlh42581
  • Members
  • 31 posts

Posted 09 August 2005 - 04:38 PM

Stevis2002, on Jul 24 2005, 07:58 AM, said:

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.

<{POST_SNAPBACK}>


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

Edited by jlh42581, 09 August 2005 - 04:41 PM.


#-7   Iniquityclothing

Iniquityclothing
  • Members
  • 262 posts

Posted 15 October 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;
}
View recent 'helpfull' threads:

403 Error problems | Ultimate SEO (contribution support)

#-6   sue76

sue76
  • Members
  • 8 posts

Posted 19 October 2006 - 05:58 AM

View Postldavies83, on Mar 2 2005, 12:25 AM, said:

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

#-5   rodrigue

rodrigue
  • Members
  • 1 posts

Posted 24 October 2006 - 09:01 AM

View PostIniquityclothing, on Oct 15 2006, 07:35 PM, said:

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.

#-4   empirical

empirical
  • Members
  • 11 posts

Posted 26 October 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.

#-3   pmarfell

pmarfell
  • Members
  • 1 posts

Posted 26 October 2006 - 10:23 AM

View PostIniquityclothing, on Oct 15 2006, 08:35 PM, said:

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.

#-2   drumcentral

drumcentral
  • Members
  • 51 posts

Posted 08 November 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
--------------------------------------------------------------------------------------------------

#-1   matrix2223

matrix2223
  • Members
  • 862 posts

Posted 18 November 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'
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.


#0   sappura

sappura
  • Members
  • 13 posts

Posted 02 December 2006 - 01:05 AM

View Postmatrix2223, on Nov 18 2006, 03:46 PM, said:

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