CSS3. Work with multiple backgrounds
We have already touched upon the capabilities of the CSS3 Backgrounds and Borders module, considering the work with shadows ( box-shadow ). Today we will talk a little about another interesting possibility - the use of multiple images in the background.
There are many reasons why you may need to compose several images in the background at all, among them the most important are:
So, we need to place several background images one above the other. How is this problem usually solved? Very simple: a block is created for each background image, which is assigned a corresponding background image. Blocks are either invested in each other, or placed in a row with the appropriate positioning rules. Here is a simple example:
')
The block with the class “fishing” inside the “mermaid” is exclusively for demonstration purposes.
Now some styles:
Result:
In this example, three nested backgrounds and one block with fish, located next to the “background” blocks. In theory, fish can be moved, for example, using JavaScript or CSS3 Transitions / Animations.
By the way, in this example for ".fishing" a new syntax for positioning the background is used , also defined in CSS3:
Currently, it is supported in IE9 + and Opera 11+, but not supported in Firefox 10 and Chrome 16. So, users of the last two browsers won't be able to catch the fish yet.
Let's go further. How to simplify this design?
A new option added in CSS3 comes to the rescue - the ability to define several background images for one element at once. It looks like this:
And corresponding styles:
To define multiple images, you must use the background-image rule, listing individual images separated by commas. Additional rules, also a list, you can set the positioning, repetitions and other parameters for each of the images. Note the order in which the images are listed: the layers are listed from left to right from the topmost to the bottommost.
The result is the same:
If the fish do not need to be allocated in a separate block for subsequent manipulations, the whole picture can be rewritten with one simple rule:
Styles:
I will not give a picture with the result - believe me, it coincides with the two pictures above. But pay attention to the styles once again, especially on “background-repeat” - according to the specification, if part of the list is skipped at the end, the browser must repeat the specified list the necessary number of times to match the number of images in the list.
In this case, it is equivalent to this description:
If you remember CSS 2.1, it defines the ability to describe background images in concise form. How about multiple images? This is also possible:
But note that now you can’t just skip the values ​​(unless they coincide with the default value). By the way, if you want to set the color of the background image, it must be done in the very last layer.
If the composition is static or dynamic no more than depending on the size of the container, then multiple backgrounds obviously simplify the page design. And what to do if you need to work with separate elements of the composition independently from javascript (move, scroll, etc.)?
How to add speakers to multiple backgrounds? In such a situation, it turns out to be convenient that, in the internal view, the browser scatters the individual parameters of the background images according to the appropriate rules. For example, for positioning there is a “background-position”, and for shifts it is enough to change only it. However, there is also a charge for the use of multiple images - in this rule (and any similar), you must list the position for all backgrounds specified for your block, and you cannot do this selectively.
To add animation to our fish background, you can use code like this:
Where
Result ( video ):
And, by the way, animations can also be done through CSS3 Transitions / Animations, but this is a topic for a separate discussion.
Finally, with similar maneuvers you can easily add the effects of parallax or interactive interaction with the background:
Multiple background images are convenient in such scenarios, as while we are talking only about the background (and not the content), using them allows us to avoid littering the html-code and the DOM. But you have to pay for everything: I can’t access individual elements of the composition by name, id, class or some other parameter. I must clearly remember the order of the elements in the code and for every change of any parameter of any element I actually have to glue a string describing the values ​​of this parameter for all elements and update it for the whole composition.
I am sure that this can be wrapped in a convenient javascript code that will take over the virtualization of relationships with individual layers, while leaving the html code of the page as clean as possible.
All modern versions of popular browsers, including IE9 +, support multiple images (you can check, for example, with saniuse ).
You can also use Modernizr to provide alternative solutions to browsers that do not support multiple backgrounds. As Chris Coyier wrote in a note on the order of layers when using multiple backgrounds , do something like this:
If you are confused by the use of JS for providing backward compatibility, you can simply declare the background twice, though it also has its drawbacks in the form of a possible double load of resources (this depends on the implementation of css processing in a specific browser):
If you’ve already begun to think about Windows 8, keep in mind that you can use multiple backgrounds when developing metro style applications, since the same engine is used internally as in IE10.
ps In the subject: I can not remember a phenomenal article about the principle of cicada .
Background composition
There are many reasons why you may need to compose several images in the background at all, among them the most important are:
- saving traffic on the size of the images, if the individual images in the total weigh less than the image with the flattened layers, and
- the need for independent behavior of individual layers, for example, when realizing the effects of parallax.
Classic approach
So, we need to place several background images one above the other. How is this problem usually solved? Very simple: a block is created for each background image, which is assigned a corresponding background image. Blocks are either invested in each other, or placed in a row with the appropriate positioning rules. Here is a simple example:
<div class="sample1"> <div class="sea"> <div class="mermaid"><div class="fishing"></div></div> <div class="fish"></div> </div> </div> ')
The block with the class “fishing” inside the “mermaid” is exclusively for demonstration purposes.
Now some styles:
.sample1 .sea, .sample1 .mermaid, .sample1 .fishing { height:300px; width:480px; position: relative; } .sample1 .sea { background: url(media/sea.png) repeat-x top left; } .sample1 .mermaid { background: url(media/mermaid.svg) repeat-x bottom left; } .sample1 .fish { background: url(media/fish.svg) no-repeat; height:70px; width:100px; left: 30px; top: 90px; position: absolute; } .sample1 .fishing { background: url(media/fishing.svg) no-repeat top right 10px; } Result:
In this example, three nested backgrounds and one block with fish, located next to the “background” blocks. In theory, fish can be moved, for example, using JavaScript or CSS3 Transitions / Animations.
By the way, in this example for ".fishing" a new syntax for positioning the background is used , also defined in CSS3:
background: url(media/fishing.svg) no-repeat top right 10px; Currently, it is supported in IE9 + and Opera 11+, but not supported in Firefox 10 and Chrome 16. So, users of the last two browsers won't be able to catch the fish yet.
Let's go further. How to simplify this design?
Multiple Backgrounds
A new option added in CSS3 comes to the rescue - the ability to define several background images for one element at once. It looks like this:
<div class="sample2"> <div class="sea"> <div class="fish"></div> </div> </div> And corresponding styles:
.sample2 .sea { height:300px; width:480px; position: relative; background-image: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/sea.png"); background-position: top right 10px, bottom left, top left; background-repeat: no-repeat, repeat-x, repeat-x ; } .sample2 .fish { background: url("media/fish.svg") no-repeat; height:70px; width:100px; left: 30px; top: 90px; position: absolute; } To define multiple images, you must use the background-image rule, listing individual images separated by commas. Additional rules, also a list, you can set the positioning, repetitions and other parameters for each of the images. Note the order in which the images are listed: the layers are listed from left to right from the topmost to the bottommost.
The result is the same:
One rule
If the fish do not need to be allocated in a separate block for subsequent manipulations, the whole picture can be rewritten with one simple rule:
<div class="sample3"> <div class="sea"></div> </div> Styles:
.sample3 .sea { height:300px; width:480px; position: relative; background-image: url("media/fishing.svg"), url("media/mermaid.svg"), url("media/fish.svg"), url("media/sea.png"); background-position: top right 10px, bottom left, 30px 90px, top left; background-repeat: no-repeat, repeat-x ; } I will not give a picture with the result - believe me, it coincides with the two pictures above. But pay attention to the styles once again, especially on “background-repeat” - according to the specification, if part of the list is skipped at the end, the browser must repeat the specified list the necessary number of times to match the number of images in the list.
In this case, it is equivalent to this description:
background-repeat: no-repeat, repeat-x, <mark>no-repeat, repeat-x</mark>; Even shorter
If you remember CSS 2.1, it defines the ability to describe background images in concise form. How about multiple images? This is also possible:
.sample4 .sea { height:300px; width:480px; position: relative; background: url("media/fishing.svg") top right 10px no-repeat, url("media/mermaid.svg") bottom left repeat-x, url("media/fish.svg") 30px 90px no-repeat, url("media/sea.png") repeat-x; } But note that now you can’t just skip the values ​​(unless they coincide with the default value). By the way, if you want to set the color of the background image, it must be done in the very last layer.
Dynamic images
If the composition is static or dynamic no more than depending on the size of the container, then multiple backgrounds obviously simplify the page design. And what to do if you need to work with separate elements of the composition independently from javascript (move, scroll, etc.)?
By the way, here is an example from life - a topic with a dandelion in Yandex:
If you get into the code, you will see something like the following:<div class=b-skin-bg sizcache="272" sizset="0"> <div class=b-fluff-bg sizcache="272" sizset="0"> <div class=b-fluff__sky sizcache="272" sizset="0"> <div style="background-position: 3244px 0px" class=b-fluff__cloud></div> <div style="width: 1200px" class=b-max-width sizcache="214" sizset="0"> <div class=b-fluff__placeholder sizcache="302" sizset="0"> <div style="bottom: 105px; display: none; left: 940px" class="b-fluff__item b-fluff_item_3" jQuery1328289994769="30"></div> <div style="bottom: 50px; display: none; left: 879px" class="b-fluff__item b-fluff_item_3" jQuery1328289994769="31"></div> <div style="bottom: 105px; display: none; left: 940px" class="b-fluff__item b-fluff_item_3" jQuery1328289994769="32"></div> ... </div> </div> </div> </div> </div>
Blocks with the classes “b-fluff-bg”, “b-fluff__cloud” and “b-fluff__item” contain background images that overlap each other. And the background with the clouds constantly scrolls, and dandelions fly across the screen.
Can this be rewritten using multiple backgrounds? In principle, yes, but provided 1) support for this feature in the target browsers and ... 2) read on;)
How to add speakers to multiple backgrounds? In such a situation, it turns out to be convenient that, in the internal view, the browser scatters the individual parameters of the background images according to the appropriate rules. For example, for positioning there is a “background-position”, and for shifts it is enough to change only it. However, there is also a charge for the use of multiple images - in this rule (and any similar), you must list the position for all backgrounds specified for your block, and you cannot do this selectively.
To add animation to our fish background, you can use code like this:
$(document).ready(function() { var sea = $(".sample5 .sea")[0]; var fishesX = 30; var fishesY = 90; var fishX = 0; var fishY = 0; var mermaidX = 0; var t = 0; function animationLoop() { fishesY = 90 + Math.floor(30 * Math.sin(t++ / 180.0)); if(--fishesX < 0) fishesX = 480; mermaidX += 0.5; if(mermaidX > 480) mermaidX = 0; fishY = -10 + (10 * Math.cos(t * 0.091)); fishX = 10 + (5 * Math.sin(t * 0.07)); sea.style.backgroundPosition = "top " + fishY + "px right " + fishX + "px, " + mermaidX + "px bottom," + fishesX + "px " + fishesY + "px, top left"; window.requestAnimFrame(animationLoop); } animationLoop(); }); Where
window.requestAnimFrame = (function() { return window.requestAnimationFrame || window.msRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.webkitRequestAnimationFrame || (function(callback) { window.setTimeout(callback, 1000 / 60); }); })(); Result ( video ):
And, by the way, animations can also be done through CSS3 Transitions / Animations, but this is a topic for a separate discussion.
Paralax and interactive
Finally, with similar maneuvers you can easily add the effects of parallax or interactive interaction with the background:
Multiple background images are convenient in such scenarios, as while we are talking only about the background (and not the content), using them allows us to avoid littering the html-code and the DOM. But you have to pay for everything: I can’t access individual elements of the composition by name, id, class or some other parameter. I must clearly remember the order of the elements in the code and for every change of any parameter of any element I actually have to glue a string describing the values ​​of this parameter for all elements and update it for the whole composition.
sea.style.backgroundPosition = "top " + fishY + "px right " + fishX + "px, " + mermaidX + "px bottom," + fishesX + "px " + fishesY + "px, top left"; I am sure that this can be wrapped in a convenient javascript code that will take over the virtualization of relationships with individual layers, while leaving the html code of the page as clean as possible.
What's wrong with compatibility?
All modern versions of popular browsers, including IE9 +, support multiple images (you can check, for example, with saniuse ).
You can also use Modernizr to provide alternative solutions to browsers that do not support multiple backgrounds. As Chris Coyier wrote in a note on the order of layers when using multiple backgrounds , do something like this:
.multiplebgs body { /* Awesome multiple BG declarations that transcend reality and imsourcess chicks */ } .no-multiplebgs body { /* laaaaaame fallback */ } If you are confused by the use of JS for providing backward compatibility, you can simply declare the background twice, though it also has its drawbacks in the form of a possible double load of resources (this depends on the implementation of css processing in a specific browser):
/* multiple bg fallback */ background: #000 url(...) ...; /* Awesome multiple BG declarations that transcend reality and imsourcess chicks */ background url(...), url(...), url(...), #000 url(...); If you’ve already begun to think about Windows 8, keep in mind that you can use multiple backgrounds when developing metro style applications, since the same engine is used internally as in IE10.
ps In the subject: I can not remember a phenomenal article about the principle of cicada .
Source: https://habr.com/ru/post/137705/
All Articles