By default, when you scroll a web page with a background, the background scrolls along with the other elements. Sometimes this is appropriate, but sometimes you want the image specified via background-image to always remain visible. To control this state, there is a background-attachment property.
background-attachment values
The property can take three values to customize the background behavior:
- scroll (default) - the background image moves along with other elements when the web page is scrolled.
- fixed - the value fixes the background image, making it insensitive to scrolling. As you scroll the page, the background will remain stationary.
- local - given value was added because in the case of local scrolling, the background with the value scroll behaves like fixed. When value local the background scrolls along with the element's content, and does not scroll unless the content is scrolled (but scrolls along with the element itself).
To better understand how the property works, take a look at the examples below. So you can compare them, your background-attachment values are all three (we hope you're using a modern desktop browser when learning CSS!).
background-attachment: scroll
background-attachment: fixed
background-attachment: local
Browser support
Desktop browsers IE9+, Edge 12+, Firefox 25+, Chrome (all versions), Safari 5+, Opera 11.5+ have full support for all values of the background-attachment property. From mobile browsers all meanings are understood by Opera Mobile, Firefox for Android, IE Mobile and QQ Browser. In other browsers, support is either partial or absent.
Further in the tutorial: background-origin and background-clip properties for positioning background images and controlling clipping.
In this tutorial, we will study in detail the technology of creating a responsive background image that will occupy the entire viewing area in the browser at any resolution. And we will use CSS - the 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.
Below are some of these websites:
Sailing Collective
Digital Telepathy
Marianne Restaurant
If you want to achieve a similar “look” in your project, you are on the right track.
Basic Concepts
Here's our game plan.
Use the background-size property to cover the entire viewport
The CSS background-size property can take the value cover . The cover value instructs the browser to automatically and proportionally scale the background image in length and width so that it remains equal to or larger than the width/height of the viewport.
Using a media query to get a smaller version of a 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 background picture. But this is not necessary and can be omitted. This technology works great without it.
But still, using smaller versions of the background for mobile devices is not a bad idea, and I will explain why.
The image that will be used in the example is about 5500 by 3600px in size.
With this resolution, we have the advantage that we achieve coverage of the entire viewing area on most wide-format monitors currently produced, but the disadvantage is the image size. This is about 1.7 MB.
Leaving so much space for loading just a background image is not very good good idea in any case, and in the case of mobile devices this is a very bad idea. In addition, such a resolution is simply unnecessary on low-resolution screens ( I'll tell you more about this 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 complete background coverage.
However, this technique will work on any block element(such as a div or form ). In case the width-height of your block container is movable, the background image will also resize to fill the entire container area.
CSS
We declare the properties of the body element as follows:
body ( /* Location of the background image */ background-image: url(images/background-photo.jpg); /* Background image is centered horizontally and vertically */ background-position: center center; /* Background does not repeat */ background-repeat: no-repeat; /* The background is fixed in the viewport and therefore does not move when the height of the content exceeds the height of the image */ background-attachment: fixed; /* This property causes the background to change scale when the size of the containing container changes. */ background-size: cover; /* Background color that will be displayed when loading a background image */ background-color: #464646 )
The most important value property in this list is:
background-size: cover;
It's worth paying attention to 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 the property-value pair. If the background image has a lower resolution than the body element, which can happen either when the page is displayed on high-resolution screens, 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 towards its original size, the image quality decreases.
Don't forget about this when you select the background. In the demo, we're using a 5500 by 3600px photo for larger screens, so it's unlikely that something similar will happen in this case.
To ensure that our background is center aligned, we declared the following:
background-position: center center;
This will set the scaling axes to the center of the viewport.
Here's what we'll do. 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 example I included the option “ download 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 experiment a little with the positioning properties ( background-attachment and background-position ) to see how they affect the scrolling behavior of the page and background.
The following property values are self-explanatory.
CSS Shorthand
Above, for clarity, I defined CSS properties in full.
And this is what the short version 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 will need Photoshop to proportionally reduce the image resolution to 768 by 505px. I also ran it through Smush.it to reduce the file size. This allowed the size to be reduced 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 for some types of web design. And we'll only load those 114 kilobytes if necessary, because looking at the stats, there are trade-offs to be made between desktop and mobile design.
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 viewport is larger than 767px, a large image is used.
The downside to 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.
And in addition, due to the fact that 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 motionless. scroll Allows the background to move along with the content. inherit Inherits the value of the parent. local The background is fixed taking into account the behavior of the element. If the element has a scroll, the background will scroll along with the content, but the background outside the element will remain 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 Internet browser Explorer 6 fixed value only works for tags
or .Internet Explorer versions up to and including 7.0 do not support the inherit value.
Chrome has supported the local value since version 4.0.
Safari has supported local since version 5.0.
Firefox doesn't understand the meaning of local .