Log in

View Full Version : full size image web page with the text scrolling?



mlegg
11-03-2011, 04:51 PM
I hope I am describing this correctly. I want to use a full size image as a web page background and then have the text overlay the image, so that if there is a lot of text that it scrolls up or down and the image stays put.

How can I do this with HTML and CSS? and/or something maybe Javascript? Whatever is the easiest solution would be great.

I uploaded an image here of 1 page http://i43.tinypic.com/a4osbb.jpg so you can see what I mean. I want that black and white logo in the center container to stay put while you scroll down on longer pages.

thanks in advance.
Mike

mlegg
11-03-2011, 09:11 PM
I added
background-attachment:fixed; and it seems to do just what I want. Will that work in all browsers?

example page is at : http://www.pscompetitiveedge.com/references.html

BTW - there is a sound clip that play automatically, so turn your speakers down if you don't want to hear it.

csscoder
11-03-2011, 09:41 PM
Hello, yes the trick is use background:url().... remember your image needs to fix the background

Iona
11-07-2011, 01:43 AM
Nice solution, I haven't known yet how to fix the background image. Much helpful, thanks for the example)
Btw, I've always wondered why people add automatic sound playing on their sites? Frankly speaking, this annoys me pretty much, so I always tend to quit such pages as soon as possible rather than turn off my speakers:D
Anyway, I'd like to know how do you add this sound to a page? Is it something about Javascript? Cos while learning HTML I haven't yet come across this..