Grow your CSS skills. Land your dream job.

Resizing background to fit browser window

  • # September 21, 2010 at 9:19 pm

    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! :)

    # September 21, 2010 at 10:37 pm

    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

    # September 21, 2010 at 11:11 pm

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".