How to Stretch a Background Picture to Fill the Entire Website (or a Column of it) (HTML/CSS)

Scaling a background image to fill its container


How to Scale a Background Picture to Fill the Entire Website (or a Column of it) (HTML/CSS)

by Christopher Heng, thesitewizard.com

I was asked by a visitor how he could "stretch a background picture so that it fills the entire screen". This article shows you how to use CSS to resize an image so that it fills either the entire browser window (if your site only has one column) or the entire column (for websites with more than one of them).

Preliminaries

As with all my CSS tutorials, you will need to know a bit of HTML and CSS, otherwise you will have difficulty following what I say below, to say nothing of adapting it to your website. You don't have to be an expert, but some basic familiarity is needed.

In addition, please note that when I say "background image", I mean that the picture forms the backdrop of a web page, or part of it, with the possibility of some foreground content overlaying it. Such an image is typically placed on a page using the background-image CSS property.

A Few Ways to Scale the Background Image

The CSS property to scale a background image so that it fills all the space available is background-size.

Given that, you still need to figure out what to do if the picture, when expanded, does not fit perfectly into the surrounding space. After all, you can't expect all your visitors to surf with a browser window opened to a perfect multiple of the dimensions of your image.

An example may make this clearer. Let's say we want to use thesitewizard.com's logo as a background image. This is a rectangular picture measuring 202 by 42 pixels. If you were to place it into an enclosure of (say) 300 by 200 pixels and expand it proportionately, it will not scale perfectly to fit into the entire space.

There are at least 3 ways that I can think of to deal with this. Since the question asked is about stretching an image to fill the entire background, I will assume here that you don't want the browser's default action of duplicating and tiling your picture across the entire window to fill it. (If you do, you don't need this article, since the browser does it automatically.)

  1. Preserve Aspect Ratio, No Clipping

    If you want the picture to remain undistorted and shown in entirety, one way is to set a CSS rule saying background-size: contain. The result of this is shown below.

    The relevant CSS code is as follows:

    #demobox {
      background-image: url(../img/logo202x42.png);
      background-size: contain ;
      background-repeat: no-repeat ;
    }

    The main rule to note is background-size: contain. It expands the image proportionately so that it is as large as possible in the given enclosing block, yet not so large that any part of the picture exceeds the container.

    Since the image, when resized in this way, does not cover every bit of blank space, the browser will automatically duplicate it across the remaining area (ie, tile it). If you don't want this to happen, you can force the browser to only show one copy of the picture with background-repeat: no-repeat, which I did for the above example.

    You can, if you wish, centre ("center" if you use a different variant of English) the picture.

    The additional CSS rule needed is:

      background-position-y: center ;

    The background-position-y: center rule centres the logo vertically. On the other hand, if your picture is taller than it is wide, you may need to use background-position-x: center to place it in the middle along the horizontal axis instead.

  2. Preserve Aspect Ratio, Clip Overflow

    Another way is to proportionately expand the image so big that every part of the container has it as a backdrop, cutting off any portion that overflows the enclosing area.

    The above was accomplished using the following CSS rules.

    #demobox {
      background-image: url(../img/logo202x42.png);
      background-size: cover ;
    }

    In order not to leave any empty space and at the same time not distort the image, the browser has to enlarge the logo so that its shortest axis fills the corresponding side of the enclosing block. This means however that the other side extends beyond the display area, and thus is clipped.

  3. Stretch to Fill Everything, Ignore Aspect Ratio

    If you don't care whether your picture looks enlongated or squashed, you can force the browser to stretch it along both its axis so that it fills the entire background area.

    To do this, I specified that the dimensions of the picture be equal to that of the container.

    #demobox {
      background-image: url(../img/logo202x42.png);
      background-size: 100% 100% ;
    }

    The first "100%" of the background-size: 100% 100% rule specifies the width, and the second the height. Percentages are relative to the enclosing block.

Compatibility

All current versions of the major browsers support the background-size property. If your visitors use Internet Explorer, they will need at least version 9 to see its effect.

Copyright © 2018 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)  Subscribe to thesitewizard.com newsfeed

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

How to Stretch a Background Picture to Fill the Entire Website (or a Column of it) (HTML/CSS)





Home
Donate
Contact
Link to Us
No Spam Policy
Privacy Policy
Topics
Site Map

Getting Started
Web Design
Search Engines
Revenue Making
Domains
Web Hosting
Blogging
JavaScripts
PHP
Perl / CGI
HTML
CSS
.htaccess / Apache
Newsletters
General
Seasonal
Reviews
FAQs
Wizards

 

 
Free webmasters and programmers resources, scripts and tutorials
 
HowtoHaven.com: Free How-To Guides
 
Site Design Tips at thesitewizard.com
Find this site useful?
Please link to us.