How To Make Background Image Fill Screen Css

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

Scaling a groundwork prototype to fill its container

How to Scale a Groundwork Film to Fill the Entire Website (or a Cavalcade of it) (HTML/CSS)

by Christopher Heng, thesitewizard.com

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

Preliminaries

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

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

A Few Ways to Scale the Background Image

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

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

An example may brand this clearer. Permit's say we want to utilize thesitewizard.com's logo every bit a background prototype. This is a rectangular film measuring 202 past 42 pixels. If you were to place it into an enclosure of (say) 300 by 200 pixels and expand information technology proportionately, it will non calibration perfectly to fit into the entire infinite.

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

Preserve Aspect Ratio, No Clipping

If y'all want the film to remain undistorted and shown in entirety, i way is to gear up a CSS dominion saying background-size: comprise. The event of this is shown below.

The relevant CSS code is as follows:

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

The main dominion to notation is background-size: contain. It expands the image proportionately so that it is as large as possible in the given enclosing block, withal not so large that whatsoever office of the motion-picture show exceeds the container.

Since the image, when resized in this way, does not cover every flake of blank space, the browser will automatically duplicate it across the remaining area (ie, tile information technology). If you don't desire this to happen, you lot can force the browser to simply testify one copy of the picture with groundwork-repeat: no-repeat, which I did for the in a higher place case.

Y'all can, if you wish, middle ("eye" if you use a different variant of English) the picture.

The boosted CSS rule needed is:

background-position-y: heart ;

The groundwork-position-y: center rule centres the logo vertically. On the other hand, if your movie is taller than it is wide, you may need to employ background-position-ten: center to place information technology in the centre along the horizontal axis instead.
Preserve Aspect Ratio, Clip Overflow

Another way is to proportionately expand the epitome so large that every part of the container has it every bit a backdrop, cutting off whatever 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 guild non to exit any empty space and at the same time not distort the image, the browser has to overstate the logo and so that its shortest axis fills the corresponding side of the enclosing block. This means however that the other side extends beyond the brandish expanse, and thus is clipped.
Stretch to Fill Everything, Ignore Aspect Ratio

If yous don't care whether your picture looks enlongated or squashed, you can force the browser to stretch information technology forth 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-epitome: url(../img/logo202x42.png);
background-size: 100% 100% ;
}

The offset "100%" of the groundwork-size: 100% 100% dominion specifies the width, and the second the tiptop. Percentages are relative to the enclosing cake.

Compatibility

All current versions of the major browsers support the background-size property. If your visitors utilise Net Explorer, they will need at least version ix to see its event.

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

thesitewizard™ News Feed (RSS Site Feed)

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

Delight Do Not Reprint This Article

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

Related Manufactures

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 Spider web Fonts: CSS Tutorial
How to Make a Mobile-Friendly Website: Responsive Design in CSS
How to Make a I Column Website Mobile Friendly (HTML/CSS)
Tin I Exist My Own Domain Name Registrar And so That I Can Avert Paying Domain Renewal Fees Every Year?
Should You Become a Domain Proper noun with Spaces or Dots In Between to Improve Readability?
Is It Better to Apply an Online Site Architect or a Standalone Web Editor?

New Manufactures

How to Set the Pinnacle of a DIV Relative to a Browser Window (CSS)
How to Generate the Free Let's Encrypt SSL Document on Your Own (Windows) Calculator
How to Insert Meta Tags into a Web Page with BlueGriffon
How to Play a Song (or Another Audio Prune) from a List on a Website
How to Describe a Horizontal Line on a Web Page with Expression Web
How to Create a Website Free of Charge
Why Can't I Make Up Whatever Domain I Desire? Is There a Way to Do Away with a Registrar Birthday?
What'south the Deviation Between a Domain Name Registrar and a Spider web Host?
How to Make a Mobile-Friendly Website: Responsive Blueprint in CSS
What's the Difference Betwixt a Content Management System (CMS), a Blog, a Web Editor and an Online Site Builder?

Pop Articles

How to Create a Weblog
How to Brand / Create a Website: The Beginner'due south A-Z Guide
Tips on Choosing a Good Domain Proper noun
Expression Web Tutorial: How to Pattern a Website with Microsoft Expression Web
Dreamweaver Tutorial: How to Design a Website with Dreamweaver CS6
BlueGriffon Tutorial: How to Design a Website with BlueGriffon three
How to Design and Publish Your Website with KompoZer (free WYSIWYG spider web editor)
Gratuitous Feedback/Contact Form Wizard

How to Link to This Page

It volition appear on your folio as:

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