Probably gonna need a spot of JS: -tricks.com/using-webp-images/#article-header-id-4 or, use an image CDN like Cloudinary in which you can set up to make sure it serves to best format it can with a single url.
Multiple Background Images with CSS3
You can apply multiple backgrounds to elements. These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.
You can do this with both the shorthand background property and the individual properties thereof except for background-color. That is, the following background properties can be specified as a list, one per background: background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size.
As you can see here, the Firefox logo (listed first within background-image) is on top, directly above the bubbles graphic, followed by the gradient (listed last) sitting underneath all previous 'images'. Each subsequent sub-property (background-repeat and background-position) applies to the corresponding backgrounds. So the first listed value for background-repeat applies to the first (frontmost) background, and so forth.
Note that if you use the background-image property, the comma-separated list of the background-position and/or the background-repeat values will assign the position and repeat, respectively, for the specified multiple background images.
Note that Gecko still uses their vendor prefix: -moz-background-clip. Gecko is also using the old property value without the -box suffix. Therefore, instead of padding-box, Gecko uses padding for the same effect. These issues have been fixed in the latest nightlies of Firefox but have not yet reached a final release at the time of writing. The latest versions of WebKit now support these properties without the prefix.
Similar to background-clip, Gecko still uses its prefix for background-origin. Gecko is also using the old property value without the -box suffix. Instead of padding-box, Gecko uses padding for the same effect. These issues have been fixed in the latest nightlies of Firefox but have not yet reached a final release at the time of writing.
CSS3 allows multiple backgrounds on a single element. This is done by defining multiple background images. You can achieve the effect using either the background-image or shorthand background properties.
The background-attachment property determines if a background image is fixed or scrolls with the rest of the page. It happens when we define how a background image is attached to a viewport. Background images can be fixed to a viewport or can scroll along with the element or with its contents via local.
There are a few things to be aware of when using the new background shorthand. If only one box value is specified both background-clip and background-origin are set to this value. If two are specified then the first is used for the origin and the second is used for the clip. As both background-position and background-size accept length and percentage values, a forward slash / needs to be present before the first background-size value. Finally, if specifying multiple background images, only the final image can specify a background-color.
In the following demo the background shorthand has been used to specify three images to illustrate the CSS box model. All values have been specified, even if they are the same as the default, to show how they can be defined. Each image has a different background-origin to place the image in the border box, padding box and content box respectively.
The clone value applies the padding, border, border-radius, -o-border-image and box-shadow to each box independently. This means that where the box breaks, such as at the start and end of a line, the border, border-radius and so on will be drawn, so that it looks like each box is its own element. If a background image is applied and set to no-repeat, it will be drawn once for each box See figure 14 for a visual demonstration of inline blocks with box-decoration-break:clone applied.
You may or may not have seen this blog post from the CSS WG asking for feedback on backgrounds and borders in CSS3. One of the features in the CSS3 draft is the ability to specify multiple backgrounds on a single element, thus allowing for effects like Sliding Doors to be achieved with only one element instead of two. Since people are snooping around in the WebCore code, I might as well reveal this now rather than later.
With CSS3, you can easily add as many background images to any one element as you please. You can also rotate images. The illustration shows an example of a container with three background images, a pattern, and two PNG files with transparency.
The simplest way to add multiple images is to separate each by a comma, making sure to place the image you want to be in the topmost position first and any additional images below it in the desired stacking order:
Here's an interesting way to add multiple background images to an element using CSS2. Before anyone gets too excited, since this technique uses generated content it doesn't work with IE6 nor IE7. Maybe IE8 will support generated content, but who knows.
Let's say we have a DIV with a tiled background image. We would like to add four more images, one at each corner of the DIV. We also want to be able to apply this to any box, which means we don't know the box's width nor height.
And then the nice trick to add two images instead of just one: the first one we add with the content property, using a url as the value. The second image we add with the background property, and position it to the top right.
Let's use this technique to create a box with an image at the center, and four fancy images on each corner. The box doesn't have a fixed width or height, so we need to put each image in the corner independently. The result should look like this:
The code is very similar to what we saw in the first example. The difference here is that we want to add some padding to the left and right of the DIV. The problem then is that the generated content will also be affected by this padding, moving the corner images towards the center of the DIV. This has an easy solution: simply compensate the DIV's padding with negative margins in both :before and :after. This brings back the images to the corners.
The background-size property can be used to specify the size of the background images. Prior to CSS3, the size of the background images was determined by the actual size of the images. The background image size can be specified using the pixels or percentage values as well as the keywords auto, contain, and cover. Negative values are not allowed.
CSS3 gives you ability to add multiple backgrounds to a single element. The backgrounds are layered on the top of one another. The number of layers is determined by the number of comma-separated values in the background-image or background shorthand property.
A common use case is using an image as part of the background. Adjusting the opacity can improve the legibility of text or achieve the desired appearance. However, there is no way to target the background-image of an element with opacity without affecting the child elements.
This approach has the advantage of support for other background properties like background-position, background-repeat, and background-size. This approach has the disadvantage of using one of the pseudo-elements which may conflict with another design effect - like a clearfix solution.
With the background-image property, CCS3 lets you add more wallpapers on a single element. The images are placed one over the other, where the first image is closest to the viewer. The syntax is simple, all the background images are separated by commas:
For setting the position of the overlaid images you can use the background-position property, as you will see in the first example of this article. And, you can also set the repeat option for the background images, to do this you can use the background-repeat property.
Another property that is embedded in browsers is the frame for background size. When the background is declared for multiple backgrounds, the statements are separated by commas, similar to the background image:
Two such features that I have been having the pleasure of enjoying are the use of multiple backgrounds and CSS gradients. I'm covering both features because multiple backgrounds by itself is simple enough, as are CSS gradients, but combining the two is where things get interesting.
What are multiple backgrounds when it comes to CSS? I mean the ability to define more than one background image for a single element. That sounds wonderful, doesn't it? It is. No more having to have nested elements with lots of CSS just to create a layered effect. The syntax is very straightforward: just separate each background image with a comma.
For browsers that don't recognize multiple backgrounds, the entire background declaration will be ignored. (Actually, according to PPK, Explorer Mac will show the last background declared.) Depending on your design, you may need a single image declared and then declare the multiple background on the next line. 2ff7e9595c
Comentarios