By default, when you scroll a web page with a background, the background scrolls along with other elements. Sometimes this is appropriate, and sometimes you want the background-image to always be visible. There is a background-attachment property to manage this state.
Background-attachment values
The property can take three values to customize the background behavior:
- scroll (default) - The background image moves with other elements when the web page is scrolled.
- fixed - the value fixes the background image, making it insensitive to scrolling. As you scroll down the page, the background in the background will remain stationary.
- local - this value was added due to the fact that in the case of local scrolling, the background with the value scroll Behave like fixed... When the value local the background scrolls with the element's content, and does not scroll unless the content scrolls (but scrolls with the element itself).
For a better understanding of how the property works, take a look at the examples below. So that you can compare them, your all three background-attachment values (hopefully 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 Opera Mobile, Firefox for Android, IE Mobile and QQ Browser understand all the meanings. In other browsers, support is either partial or absent.
Further down the tutorial: background-origin and background-clip properties for positioning background images and controlling cropping.
This little lesson will be about how to make a beautiful fixed background on your website (or on a one-page page) that will smoothly flow from one image to another when the user scrolls the page. CSS has a background-attachment: fixed property that allows the background image to be fixed. That is, when scrolling the page, it will not scroll with the page. But there is no CSS property to make the images change when scrolling, so we'll use Javascript.
Fixed background for the site
Perhaps you do not understand what I am writing about, so watch the demo and you yourself will see this beautiful effect:
Download
How to make a changing background for a website?
Html
We'll start by defining the HTML structure of the page for which we are doing this effect:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <div id = "cbp-fbscroller" class = "cbp-fbscroller"> |
In the tag we have defined navigation for blocks with different images. That's it for the HTML markup. Moving on to the styles.
CSS
As for the styles, there are not very many of them here.
We make the block height as high as possible. That is, to the height of the user's browser window.
| 1 2 3 4 5 6 | html, body, .container, .cbp-fbscroller, .cbp-fbscroller section (height: 100%;) |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | .cbp-fbscroller> nav (position: fixed; / * the menu is always in one place * / z-index: 9999; / * nothing should overlap the menu * / right: 100px; / * it is 100 pixels from the right edge * / top: 50%; / * and vertically in the middle of the page * / width: 26px; / * menu width * / -webkit-transform: translateY (-50%); -moz-transform: translateY (-50%); -ms-transform: translateY (-50%); transform: translateY (-50%); ) / * below are the styles for each item (link) in the menu * /.cbp-fbscroller> nav a (display: block; position: relative; z-index: 9999; color: transparent; width: 26px; height: 26px; outline: none; margin: 25px 0; border-radius: 50%; border: 4px solid #fff;) .no-touch .cbp-fbscroller> nav a: hover (background: rgba (255, 255, 255, 0.6);) .cbp-fbscroller> nav a.cbp-fbcurrent (background: #fff;) |
I commented on some properties, I think it is clear which property is responsible for what. If not, write in the comments! 🙂
As a result, we get the following menu:
| 1 2 3 4 5 6 7 8 9 10 | .cbp-fbscroller section (position: relative; background-position: top center; background-repeat: no-repeat; background-size: cover;) .no-touch .cbp-fbscroller section (background-attachment: fixed;) |
It remains to set the necessary images for the corresponding blocks:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | # fbsection1 (background-image: url (../images/1 .jpg);) # fbsection2 (background-image: url (../images/2 .jpg);) # fbsection3 (background-image: url (. ./images/3 .jpg);) # fbsection4 (background-image: url (../images/4 .jpg);) # fbsection5 (background-image: url (../images/5 .jpg);) |
Javascript left! / Script><script>$ (function () (cbpFixedScrollLayout.init ();));</ script>
Conclusion
That's all. A beautiful effect, and it won't be difficult, I think, to insert it on your site! I wish you success, if you have problems with the installation - write in the comments 🙂.
P.S .: I changed the design of the site. In my opinion, it is more modern and convenient.
brief information
CSS versions
The values
fixed Makes the background image of an element stationary. scroll Allows the background to move along with the content. inherit Inherits the value from the parent. local The background is fixed based on the behavior of the element. If the element is scrolling, then the background will scroll with the content, but the background that goes beyond the element's border stays 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 Explorer 6, fixed only works for tags
or .Internet Explorer up to and including version 7.0 does not support the inherit value.
Chrome has supported the value local since version 4.0.
Safari has supported local since 5.0.
Firefox doesn't understand the meaning of local.
When setting a stationary background image under a table, in which we will have text and other useful information, the following effect is created: when scrolling a table with text, the background under it remains stationary, and does not move along with the table. Like here:
This effect can create some illusion of two layers, some space on your pages.
Typically, the effect of a still picture of the background is achieved by setting the following attributes in the CSS stylesheet: background-attachment: fixed; This is a CSS style sheet, which you have in a separate document with the extension .css
There are several ways to install what we need.
1st method.
Choose a picture that will be our background. In this case, I take this picture (click on the thumbnail to see the full size):
In the css style document, where we set the parameters for BODY, insert the following construction:
BODY (background-image: url (background image url); background-attachment: fixed; background-repeat: no-repeat; background-position: top;)
In this case, we take as a background image a large image in full screen (for example, 1280 by 1024 px).
Note: If you do not have a css stylesheet, then you need to create it, as indicated in - and register a link to the css stylesheet in the code of your html page, as indicated in the same lesson.
So, here are the parameters we set using styles:
Background-image: url (address of the background image); - we register the address of our background image 1280 by 1024 px.
Background-attachment: fixed; - we instruct the background to remain fixed, that is, motionless.
Background-repeat: no-repeat; - we ask the background not to multiply.
Background-position: top; - set the position of the background image: set to the top edge of the page.
So, we inserted into the css styles document, in BODY, this construction:
BODY (background-image: url (background image url); background-attachment: fixed; background-repeat: no-repeat; background-position: top;)
I created a simple table on 70% of the screen and put text and two pictures in it for clarity. Here's what we got on the page: (to see the effect of a still background, scroll the page up and down).
2nd way.
Let's try to put a small picture that will automatically repeat and fill the entire space of the page, forming a background pattern. Here is this picture:
At the same time, we fix the entire background by writing the following construction in the css stylesheet:
BODY (background-image: url (background image url); background-attachment: fixed;)
Here we only set the parameter: background-attachment: fixed; - that is, they instructed the browser to make the background image still. Since we didn’t tell the picture "not to multiply" - it should multiply on the whole screen.
3rd way.
Let's try to set the background image on one side, and place the table with text and pictures on the page on the opposite side so that it does not obscure the background image. To do this, we will write the following in the css document:
BODY (background: # e0ddd8 url (background image url) no-repeat fixed left top)
Background: # e0ddd8 url (address of the background image) - the color under the background image - beige, to match the background color of the image itself. This is done so that the transition of our picture to the background is not visible (the picture occupies only part of the screen).
No-repeat - the picture is not reproduced (there is one big picture with one of my favorite American actors - Robert Duvall).
Fixed - the background is fixed, that is, stationary.
Left top - aligned to the top left of the screen (you can put the picture on the right, and the site table on the left, as you wish. To do this, in the html document in the table, you will write: