with the .cd-scrolling-bg class, the usual settings for the background.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...

Styles

The default value for the background-attachment property is scroll , which means the background scrolls along the element. If set to fixed , then the position will be fixed.

Body, html, main ( /* important */ height: 100%; ) .cd-fixed-bg ( min-height: 100%; background-size: cover; background-attachment: fixed; background-repeat: no-repeat ; background-position: center center; ) .cd-fixed-bg.cd-bg-1 ( background-image: url("../img/cd-background-1.jpg"); ) .cd-fixed- bg.cd-bg-2 ( background-image: url("../img/cd-background-2.jpg"); ) .cd-fixed-bg.cd-bg-3 ( background-image: url( "../img/cd-background-3.jpg"); ) .cd-fixed-bg.cd-bg-4 ( background-image: url("../img/cd-background-4.jpg" ); ) .cd-scrolling-bg ( min-height: 100%; )

In this tutorial, we will learn in detail how to create a responsive background image that will take up the entire viewing area of ​​the browser at any resolution. And we will use CSS - background-size property. Without JavaScript:

EXAMPLE
DOWNLOAD SOURCES

Examples of using responsive background images

Today, sites in which the background image covers the entire displayed area of ​​the page are very popular.
The following are some of these websites:

Sailing Collective

Digital Telepathy

Marianne Restaurant

If you want to achieve a similar "appearance" in your project, you are on the right track.

Basic concepts

Here is our game plan.

Use the background-size property to cover the entire viewport

The background-size CSS property can be set to cover . The cover value instructs the browser to automatically and proportionally scale the length and width of the background image so that it remains equal to or greater than the width/height of the viewport.

Using a media query when getting a smaller version of the background image for mobile devices

To reduce page load time on small screen resolutions, we will use a media query to get a smaller version of background picture. But this is not required and can be omitted. This technology works great without it.

But it's still a good idea to use smaller versions of the background for mobile devices, and I'll explain why.
The image that will be used in the example is about 5500 by 3600px .

With this resolution, we have the benefit of covering the entire viewing area on most widescreen monitors currently on the market, but the minus is image size. It's about 1.7 MB.

Leaving that much space to load just a background image is not a good idea anyway, and in the case of mobile devices it is a very bad idea. In addition, such a resolution is simply unnecessary on screens with low resolution ( I will talk about this in more detail later.).

So. Let's get started.

HTML

Below is everything you need from the markup:

...The content of your page...

We will assign a background image to the body element and thus achieve full background coverage.

However, this technique will work on any block-level element (such as div or form ). In case your block container's width-height is movable, the background image will also resize to fill the entire container area.

css

We declare the properties of the body element like this:

body ( /* The location of the background image */ background-image: url(images/background-photo.jpg); /* The background image is centered horizontally and vertically */ background-position: center center; /* The background does not repeat */ background-repeat: no-repeat; /* The background is fixed in the viewport and therefore doesn't move when the content's height exceeds the image's height */ background-attachment: fixed; /* This property causes the background to scale when its containing container is resized */ background-size: cover; /* The background color that will be displayed when the background image is loaded */ background-color: #464646; )

The most important value property in this list is:

background-size: cover;

It is worth focusing on it. This is where the miracle happens. This value-property pair instructs the browser to scale the background image in such proportions that the height-width remains equal to or greater than the height-width of the element itself. ( In our case, this element—body.)

And here an unpleasant situation arises with a property-value pair. In the case when the background image will have a lower resolution than the dimensions of the body element, and this can happen either when the page is displayed on the screens high definition, or when you have tons of content on the page, the browser will stretch the image.

And as you know, when we stretch an image beyond its actual size, we lose image quality ( in other words, pixelation appears):

When an image is scaled up to its native size, the image quality drops..

Keep this in mind when choosing your background. In the demo, we are using a 5500 x 3600px photo for big screens, and therefore in this case it is unlikely that something like this will happen.

In order for our background to be center aligned, we declared the following:

background-position: center center;

This will set the scaling axes to the center of the viewport.

We'll do this. Let's set the background-attachment property to fixed to make sure the image stays in place even if we scroll down the page:

background-attachment: fixed;

In the demo, I included the option " upload some content' so that you can observe the behavior of the background when scrolling the page.

All you have to do is download the demo and play around with the positioning properties ( background-attachment and background-position ) a bit to see how they affect the scrolling behavior of the page and background.

The following property values ​​speak for themselves.

CSS shorthand

Above, for clarity, I defined CSS properties in full.

And this is what the summary looks like:

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

All you have to do is change the url value to the path to your image.

Optional: media query to get a smaller version of the background image

For lower resolution screens, we'll need Photoshop to scale down the image's resolution to 768 by 505px . I also ran it through Smush.it to reduce the file size. This made it possible to reduce the size from 1741 to 114 kilobytes. This reduced the file size by 93%.

Don't get me wrong, but 114 kilobytes is still quite a lot to use in some kind of web design. And we will download these 114 kilobytes only if necessary, because, looking at the statistics, we should find trade-offs between the design for desktop and mobile devices.

And here is the media query itself:

The key part of the media query is the max-width: 767px property, which in our case means that if the browser's viewport is larger than 767px, a large image is used.

The downside of this method is that if you resize the browser window from, say, 1200px to 640px (or vice versa), you will see a flickering screen while the smaller or larger image loads.

Moreover, because some mobile devices can work at a higher resolution - for example, an iPhone 5 with a Retina display with a resolution of 1136 by 640px , a smaller image will look ugly.

brief information

CSS versions

Values

fixed Makes the element's background image fixed. scroll Allows the background to move along with the content. inherit Inherits the value of the parent. local The background is fixed based on the behavior of the element. If the element is scrollable, then the background will scroll with the content, but the background that extends beyond the element remains in place.

HTML5 CSS2.1 IE Cr Op Sa Fx

HTML5 CSS3 IE Cr Op Sa Fx

Object Model

document.getElementById("elementID ").style.backgroundAttachment

Browsers

In browser Internet Explorer 6 fixed value only works for tags or .

Internet Explorer up to version 7.0 does not support the inherit value.

Chrome has supported the local value since version 4.0.

Safari has supported the local value since version 5.0.

Firefox doesn't understand the meaning of local .

Any room will look much better with an expensive Persian rug on the floor. So what's wrong with your site? Maybe it's time to “cover” its floor with an expensive elegant handmade carpet. Let's take a closer look at how to make a background for the site:

Background for the site

It happens that the old site design is already boring. And I want something new and tasty. And the new design will be such if you cook it yourself.

But changing the entire design of the resource on your own is a thankless thing. And not everyone has their hands properly “sharpened” for this business. Therefore, it's easiest to refresh an old template by changing the resource's background color or background image.

There are several ways to change the background on a website. For this, the possibilities of CSS or html are used. But many of the background properties have the same name and usage in these web technologies.

HTML background basics

Several elements can be used as a background:

• Color;
• background image;
• Texture image.

Let's look at the use of each of them in more detail.

To set the background color for a site, use the background-color property of the style attribute. That is, to set the main color for a web page, you need to register it inside the tag . For instance:

Website Background #55D52B

In addition to the hexadecimal color code, a keyword or RGB value is supported. Examples:

Website background rgb(23,113,44)

Website background green

Setting the background color with keywords has a number of limitations compared to the other two methods.

In html, only 16 color keywords are supported. Here are a few of them: white, red, blue, black, yellow other.

Therefore, in order to set the background for an html site, it's better to use hex or RGB.

In addition to color selection, other customization options are available. Setting the background-color property to transparent makes the background of the page transparent. This value is assigned to this property by default.

Now let's look at the possibilities of the hypertext language for setting the background image for the site. This can be done with the background-image property.

As you can see from the code, the image is bound via the url path given in parentheses. But not all pictures turn out to be so large that they fill the entire screen area with their size. Let's see how the smaller image will be displayed.

Let's assume that we are developing a site about poetry, and we want to use an image of Pegasus as a background. The winged horse will personify the freedom of the poet's creative thought!

We want the image to be displayed in the middle of the screen once. But, unfortunately, the browser does not understand our lofty desires. And displays a smaller image for the background of the site as many times as the screen area can fit:

Probably, four smiling horses with wings will be too much for poets for inspiration. Therefore, we prohibit the cloning of our Pegasus. We do this with the background-repeat property. Possible values:

• repeat-x - repeat the background image horizontally;
• repeat-y - vertically;
• repeat - on both axes;
• no-repeat - repetition is prohibited.

Among these options, we are interested in the last one. Before changing the background of the site, we use it in our code:

But, of course, it is better if our flyer is located in the middle of the screen. The background-position property is just for positioning the background image on the page. You can set location coordinates in several ways:

• keyword ( top , bottom , center, left, right);
• Percentage - the countdown starts from the upper left corner;
• In units of measurement (pixels).

Let's use the most simple option centering:

It happens that you need to fix the position of the picture when scrolling. Therefore, before you make an image the background of the site, use the special property background-attachment . The values ​​it accepts are:

• scroll;


• fixed.

We need the last value. Now our example code will look like this:

Website texture background

In the first example, we used a large and beautiful desert landscape for the background. But for such beauty you have to pay in full. The weight of the image made in high quality, can reach several megabytes.

Such a volume does not affect the speed of loading the page by the browser with a high-speed Internet connection. But what about mobile internet, which will take a long time to load several "meters"?

All these problems are solved with the help of a textured background. It uses a small image as the texture pattern. Even if it is repeated many times, the drawing is loaded only once.