Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Background Image


heygidday

Recommended Posts

Thanks for any help here too.

 

I want to set a background image on the whole of my oscommerce site, to appear in tact across the whole page. I also want it fixed, so that it doesn't scroll.

 

I also want to add an audio (mid) file to start when the site loads.

 

I can do this on a regular web page, I know the code is

 

<body bgproperties="fixed" background="http://www.website.com/filename.jpg">

 

<BGSOUND balance=0 src=http://www.webpage.com/filename.mid volume=0 loop=infinite>

 

How can I put this into my oscommerce (new install) site?

 

I very much appreciate your assistance. Al

Link to comment
Share on other sites

Open ur stylesheet

 

Search for

body {

 

add this below that

 

 

background-image:url(http://www.website.com/filename.jpg); 
background-repeat:no-repeat;

 

if no body class is there then create this

 

body {

background-image:url(http://www.website.com/filename.jpg); 
background-repeat:no-repeat;

}

Link to comment
Share on other sites

Open ur stylesheet

 

Search for

body {

 

add this below that

background-image:url(http://www.website.com/filename.jpg); 
background-repeat:no-repeat;

 

if no body class is there then create this

 

body {

background-image:url(http://www.website.com/filename.jpg); 
background-repeat:no-repeat;

}

 

Thanks for helping me. There is a body class in my CSS file although when I add the code as directed and uploaded etc, the image still isnt loading. I viewed the source of my refreshed main page but there is no reference to the code or image. Am I doing something wrong, can I check anything?

Link to comment
Share on other sites

Do you have the picture in your root directory, and you did change the website and filename reference to your site, and the picture filename correct?

 

Jeremy

 

Yes they are all correct. I think maybe it is the code though, since even if the filename or url was incorrect it would still be in the final page source right? But if I put the url/filename text in my browser the image displays.

 

Here is the whole class:

 

BODY {

background-image:url(http://www.heygidday.com/catalog/images/background.jpg);

background-repeat:no-repeat;

background: #ffffff;

color: #000080;

margin: 0px;

}

Link to comment
Share on other sites

Yes they are all correct. I think maybe it is the code though, since even if the filename or url was incorrect it would still be in the final page source right? But if I put the url/filename text in my browser the image displays.

 

Here is the whole class:

 

BODY {

  background-image:url(http://www.heygidday.com/catalog/images/background.jpg);

  background-repeat:no-repeat;

  background: #ffffff;

  color: #000080;

  margin: 0px;

}

 

it works for me

<html>
<head>
 
 <style>
	 BODY {
	 background-image:url(http://www.heygidday.com/catalog/images/background.jpg); 
	 background-repeat:no-repeat; 
	 }
	 </style>
<body>
test it
</body>
</html>

 

do this. look for another body tag in ur stylesheet, may be its like

 

body, TD, TR {

 

or so on...

 

save the above file as html and check that. now i dont know what u want but u can actually control the repeating of the image usingstylesheet. such as repat x -> on x axis, repeat-y -> on y axis or so on...

 

see if problem is still there

Link to comment
Share on other sites

it works for me
<html>
<head>
?
?<style>
?	BODY {
?	background-image:url(http://www.heygidday.com/catalog/images/background.jpg); 
?	background-repeat:no-repeat; 
?	}
?	</style>
<body>
test it
</body>
</html>

 

do this. look for another body tag in ur stylesheet, may be its like

 

body, TD, TR {

 

or so on...

 

save the above file as html and check that. now i dont know what u want but u can actually control the repeating of the image usingstylesheet. such as repat x -> on x axis, repeat-y -> on y axis or so on...

 

see if problem is still there

 

There is no other body tag in my stylesheet.

 

I tried your html and style code and that works great in a test.html file. All I want is a fixed background image that will not scroll when the text/page scrolls.

 

Can I use your html code somewhere to achieve this? Thanks so much, Al

Link to comment
Share on other sites

  • 8 months later...

Short answer...

 

background-attachment: fixed

 

Long answer...

 

 

 

body {

background-color: #ffffff;

background-image: url(http://example.com/yourbg.jpg);

background-repeat: no-repeat;

background-position: center center;

background-attachment: fixed }

 

 

 

 

The above code goes in between the head tags. advanced, first text box from the top

 

 

background-color: #ffffff; this line assigns a color alway use on with an image pick on close that complements your image and looks good with you page w/o the img in case it doesn't download or some one turn images off. You can use hex codes color names or RGB codes here.

 

background-image: url( http://example.com/yourbg.jpg); this like assigns your background image

 

background-repeat: no-repeat this line prevents your image from repeating, other possible values here are repeat, repeat-y, and repeat-x

 

background-position: center center this line positions your image. Horizontal keywords include (left, center, right)

Vertical keywords include (top, center, bottom)

 

background-attachment: fixed this line prevents scrolling, possible values are fixed and scroll.

 

I use it in http://dragonandfaerie.com

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...