Css background image fill all

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

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

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.

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

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.

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.

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)

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:

Copyright © 2018 Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 20 December 2018.

Источник

CSS Background Image Size Tutorial – How to Code a Full Page Background Image

This tutorial will show you a simple way to code a full page background image using CSS. And you’ll also learn how to make that image responsive to your users’ screen size.

Making a background image fully stretch out to cover the entire browser viewport is a common task in web design. Fortunately, this task can be taken care of with a few lines of CSS.

Cover Viewport with Image

First, we will want to make sure our page actually covers the entire viewport:

Inside html , we will use the background-image property to set the image:

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Magic of ‘Background-Size’ Property

The magic happens with the background-size property:

cover tells the browser to make sure the image always covers the entire container, in this case html . The browser will cover the container even if it has to stretch the image or cut a little bit off the edges.

Because the browser may stretch the image, you should use a background image that has high enough resolution. Otherwise the image may appear pixelated.

If you care about having all of the image appear in the background, then you will want to make sure the image is relatively close in aspect ratio compared to the screen size.

How to Fine Tune an Image Position and Avoid Tiling

The browser can also choose to display your background image as tiles depending on its size. To prevent this from happening, use no-repeat :

background-repeat: no-repeat;

To keep things pretty, we will keep our image always centered:

background-position: center center;

This will center the image both horizontally and vertically at all times.

We have now produced a fully responsive image that will always cover the entire background:

How to Fix an Image in Place When Scrolling

Now, just in case you want to add text on top of the background image and that text overflows the current viewport, you may wish to make sure your image stay in the background when the user scrolls down to see the rest of the text:

background-attachment: fixed;

You can include all of the background properties described above using short notation:

background: url(image.jpg) center center cover no-repeat fixed;

Optional: How to Add a Media Query for Mobile

To add some icing on the cake, you may wish to add a media query for smaller screens:

@media only screen and (max-width: 767px) < html < background-image: url(smaller-image.jpg); >> 

You can use Photoshop or some other image editing software to downsize your original image to improve page load speed on mobile internet connections.

So now that you know the magic of creating a responsive, full page image background, it is time to go create some beautiful websites!

Want to See More Web Development Tips and Knowledge?

Источник

How to Use Images as Backgrounds with CSS

As a new web designer, one very skill you’ll need to master is using background images.

Depending on the design, you may need to completely fill a CSS container with an image, or sometimes the image will just partially fill the container.

In this post, we’ll show you three examples, using the CSS property background-size .

Base CSS

To display an image as background within a container, you need this sample CSS:

.container-class background-image: url(“path/to/image.jpg”);
background-repeat: no-repeat;
background-position: center;
width: 400px;
height: 400px;
border: 2px dashed #333;
>

• Replace .container-class with the selector you want to target.
• border and background-position properties are optional. We use them here to showcase the different results we’ll display below.

To define a specific size for the image, we’re missing the background-size property. Let’s talk about that in the next steps.

Example #1. Full width background, but no full height

In this case, we are using an image which is higher than it is wide.

Include the syntax below to make the background image go full width:

In tthis example, notice how the image only covers the width, but not the height.

Example #2. Full height background, but no full width

In this case, we are using an image with bigger height than width.

Include the syntax below to make the background image go full height:

In this example, notice how the image only covers the height, but not the width.

Example #3.. Full background

Include this syntax to make the background image go full. This is an automatic way to fill the complete container, no matter the image’s aspect ratio:

In this example, notice how the image covers the container. There are no empty spaces.

The list of background-size values

This is the complete list of background-size values:

• auto – Default value.
• length – As example: 100% auto or 400px auto . The first value is for the width, the second for the height.
• cover – Cover the complete area.
• contain – Scale the image to its biggest size.
• initial – Set this propery to its default.
• inherit – Inherited from the parent.

Author

Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México. View all posts

Источник