How To Stretch A Background Picture To Fill The Entire Website (or A ...

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/.

You are here: Top > Cascading Style Sheets (CSS) Tutorials and Tips > How to Stretch a Background Picture to Fill the Entire Website (or a Column of it) (HTML/CSS)

Other articles on: CSS, HTML

thesitewizard™ News Feed (RSS Site Feed)

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

• How to Change the Background Colour of a Web Page in CSS (HTML/CSS)
• How to Add a Shadow to a Box in HTML/CSS
• How to Use Web Fonts: CSS Tutorial
• How to Make a Mobile-Friendly Website: Responsive Design in CSS
• How to Make a One Column Website Mobile Friendly (HTML/CSS)
• Can I Be My Own Domain Name Registrar So That I Can Avoid Paying Domain Renewal Fees Every Year?
• Should You Get a Domain Name with Spaces or Dots In Between to Improve Readability?
• Is It Better to Use an Online Site Builder or a Standalone Web Editor?

New Articles

• How to Convert Your Website from XHTML 1.0 to HTML5 the Quick and Easy Way
• How to Set the Height of a DIV Relative to a Browser Window (CSS)
• How to Generate the Free Let's Encrypt SSL Certificate on Your Own (Windows) Computer
• How to Insert Meta Tags into a Web Page with BlueGriffon
• How to Play a Song (or Some Other Audio Clip) from a List on a Website
• How to Draw a Horizontal Line on a Web Page with Expression Web
• How to Create a Website Free of Charge
• Why Can't I Make Up Any Domain I Want? Is There a Way to Do Away with a Registrar Altogether?
• What's the Difference Between a Domain Name Registrar and a Web Host?
• How to Make a Mobile-Friendly Website: Responsive Design in CSS

How to Link to This Page

To link to this page from your website, simply cut and paste the following code to your web page. (Switch to your web editor's HTML source mode before pasting.)

<a href="https://www.thesitewizard.com/css/stretch-background-image.shtml" target="_top">How to Stretch a Background Picture to Fill the Entire Website (or a Column of it) (HTML/CSS)</a>

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)