Jump to content


Corporate Sponsors


Latest News: (loading..)

* * * * * 1 votes

Adding a background image to the whole site.


68 replies to this topic

#1 jpeiji

  • Community Member
  • 20 posts
  • Real Name:Jared

Posted 01 March 2005, 16:20

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.

#2 ldavies83

  • Community Member
  • 114 posts
  • Real Name:Leigh
  • Location:UK

Posted 01 March 2005, 16:25

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!

#3 jpeiji

  • Community Member
  • 20 posts
  • Real Name:Jared

Posted 01 March 2005, 16:37

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

#4 jpeiji

  • Community Member
  • 20 posts
  • Real Name:Jared

Posted 01 March 2005, 17:09

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?

#5 jpeiji

  • Community Member
  • 20 posts
  • Real Name:Jared

Posted 01 March 2005, 17:17

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

#6 Laney

  • Community Member
  • 210 posts
  • Real Name:Laney
  • Location:Canada

Posted 15 March 2005, 15:18

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

#7 shopkeper

  • Community Member
  • 31 posts
  • Real Name:Matt Holmes

Posted 15 April 2005, 15:18

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

#8 shopkeper

  • Community Member
  • 31 posts
  • Real Name:Matt Holmes

Posted 15 April 2005, 16:01

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

#9 osfalcon

  • Community Member
  • 47 posts
  • Real Name:bill

Posted 24 July 2005, 05:26

how would you add a .swf file / flash?


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

#10 Stevis2002

  • Community Member
  • 223 posts
  • Real Name:Steve

Posted 24 July 2005, 11:58

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.

#11 Vger

  • Community Member
  • 16,978 posts
  • Real Name:R Anthony
  • Gender:Not Telling

Posted 24 July 2005, 13:01

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

#12 jlh42581

  • Community Member
  • 31 posts
  • Real Name:Jeremy

Posted 09 August 2005, 16:38

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, 16:41.


#13 Iniquityclothing

  • Community Member
  • 262 posts
  • Real Name:Phil
  • Gender:Male
  • Location:Norwich

Posted 15 October 2006, 19:35

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)

#14 sue76

  • Community Member
  • 8 posts
  • Real Name:ShuLing

Posted 19 October 2006, 05:58

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

#15 rodrigue

  • Community Member
  • 1 posts
  • Real Name:Alain Rodrigue

Posted 24 October 2006, 09:01

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.

#16 empirical

  • Community Member
  • 11 posts
  • Real Name:Robert Milner

Posted 26 October 2006, 01:02

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.

#17 pmarfell

  • Community Member
  • 1 posts
  • Real Name:Paul Marfell

Posted 26 October 2006, 10:23

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.

#18 drumcentral

  • Community Member
  • 51 posts
  • Real Name:Kenny
  • Location:Scotland

Posted 08 November 2006, 21:31

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

#19 matrix2223

  • Community Member
  • 859 posts
  • Real Name:Eric
  • Gender:Male
  • Location:MD USA

Posted 18 November 2006, 23:46

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.


#20 sappura

  • Community Member
  • 13 posts
  • Real Name:Satu

Posted 02 December 2006, 01:05

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