...

View Full Version : Static Background Image with scrolling text??



Esskie
04-30-2006, 10:01 PM
Hi there,
I've noticed one or three sites lately using a method of displaying the page's background image in such a way so that it's static & remains so while the text on the page scrolls on top of it.

It looks really quite good imho & I'd love to know how it's done but I can't find anything online with any nfo about it?.

An example: www.linux-usb.org/SpeedTouch/mandrake (http://www.linux-usb.org/SpeedTouch/mandrake) , am I correct in saying it involves the use of stylesheets?.
I am presuming so due to the reference to 3 css files in the source: style.css, style-small.css & style-print.css. There is also a 'IE6hack.css' in the code.

Thanx & Regards, Esskie.

_Aerospace_Eng_
04-30-2006, 10:05 PM
<style type="text/css">
html, body {
margin:0;
padding:0;
border:0;
height:100%;
background:#FFF url(yourimage.jpg) center no-repeat fixed;
}
</style>
That goes in between your head tags, change yourimage.jpg to match your own image location.

Arbitrator
04-30-2006, 10:16 PM
Specifically, the fixed background is a result of the CSS background-attachment property. For reference, see W3Schools' CSS Background Properties (http://www.w3schools.com/css/css_background.asp) list.

Esskie
05-01-2006, 12:52 AM
Hi There,
Thanx for that, I really appreciate you guys taking the time to reply & help me out so quickly! :thumbsup: .

I see the difference in the code now from your post _Aerospace_Eng_ ,

http://www.w3schools.com/css/pr_background-attachment.asp shows the following for a scrolling bg:

body
{
background-image: url(stars.gif);
background-attachment: scroll
}

(thanx for the url Arbitrator)
...compared to:


<style type="text/css">
html, body {
margin:0;
padding:0;
border:0;
height:100%;
background:#FFF url(yourimage.jpg) center no-repeat fixed;
}
</style>

...which is what I'm after :).

So using the code you posted _Aerospace_Eng_, is it a case of using the <IMG SRC="pics/mypic.jpg" or do I just place 'pics/mypic.jpg' between the brackets ie;

' background:#FFF url(pics/mypic.jpg') center no-repeat fixed; ' ?.

Sorry for being so dumb btw but I usually make get the htm/html file/page together in a WYSIWYG first then try to do as much as I can in notepad after that. Afraid I still need the wysiwyg editor there to get up & running tho :rolleyes: .

Best Regards, Esskie.

Arbitrator
05-01-2006, 04:45 AM
Use background: #fff url(pics/mypic.jpg) center no-repeat fixed;

It's the same as (the compacted form of):

background-color: #fff;
background-image: url(pics/mypics.jpg);
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;

Esskie
05-01-2006, 08:45 AM
Hi there,
Excellent! :thumbsup: , thanx again. You've no idea how long I've been trying to suss that piece of code out!!. Guess I just caved in at the end & asked someone :) , not that a friend's help isn't appreciated of course but learning by doing etc ya know?,

Best Regards, Esskie.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum