How to Make an Auto Fitting Background in CSS

Written by ryan menezes
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Make an Auto Fitting Background in CSS
A poorly positioned background can ruin your page. (Dynamic Graphics Group/Dynamic Graphics Group/Getty Images)

HTML can set any image that you choose as the background of a Web page. Depending on the properties that you set, this image can stretch across the entire screen. But if the user resizes the page after opening it, the background image will remain the same size. A scroll bar will then usually appear. To autofit the background, letting it change its size along with the window, edit the page's CSS properties.

Skill level:
Easy

Other People Are Reading

Instructions

  1. 1

    Insert the following code within your stylesheet's "body" declaration block:

    overflow-y: hidden ! important;

    overflow-x auto ! important;

  2. 2

    Create a new declaration block labelled "bg_image." Insert the following code in it:

    width: 100%;

    left: 0px;

    top: 0px;

    position: absolute;

    z-index: 0;

    Though it seems intuitive to add "height: 100%" in this block, leave that line out. It will affect the image's aspect ratio.

  3. 3

    Create another declaration block labelled "content." Insert the following code in it:

    z-index: 2;

    position: absolute;

  4. 4

    Move from the stylesheet to the web page itself. Add the following code right after your <body> tag:

    <div id="bg_image">

    <img src="photos/landscape.jpg" />

    </div>

    Replace "photos/landscape.jpg" with your background image address.

  5. 5

    Place all of the page's content between the following two tags:

    <div id="content">

    </div>

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.