Resizing background to fit browser window

[metamoo]

Hi, I’m emphatically very new to CSS, and I’ve built a page which is entirely based on position:absolute.

Test Page

It works perfectly except for one little problem. The background does not resize to the size of the browser window. I have it set at 2560 px width to accommodate the widest screens but on anything smaller I’m getting a horizontal scroll bar. I have nooooooooooo clue how to fix it. If you can help, I would really appreciate if you could be extremely specific as to do with the code as I have a lot of trouble following these comments. I guess I’m just a bit too dense to understand CSS! I also had posted this on another thread and was asked to move it here. Like I said… I’m not the sharpest tool in the shed! :)

[demersdesigns]

metamoo,
You are not dense, just new to the language. We were all there once. Here is what I would suggest for the background…

The bubbles image can be applied to the body as a background image in css. The image looks to be something that repeats, so you could make it much smaller by creating a seamless background and setting it to repeat in the css. This would get rid of the scrollbars and also speed things up.

Here is a snippet of css that would accomplish the repeating background image set to the body.

body{

background: #FFF url(../path_to_image/bubbles1.jpg) top left repeat;

}

I would also suggest moving all of your css to an external stylesheet. Then, if you need to make a simple change to a style or layout, it only needs to be done in one place.

Sorry for the long winded response. Hope that helps somewhat.

Here is a great site to get the basics of css down.
http://www.w3schools.com/css/

Cheers,
Paul

[virtual]

If you wish to continue in web design, learn how to use floats and margins, not position absolute. There is only a need for it in particular circumstances.

[Author]

Posts