Apply Background-Size to Individual Layer of a Multiple Background

Apply background-size to individual layer of a multiple background

I believe you can specify the size inline for each background url:

Here's the link: http://www.css3.info/preview/multiple-backgrounds/

so for example, use /cover below on your last url

body{
    background:
        url(images/small-group-bubbles.png) repeat-x fixed 10% 0,
        url(images/blur-bubble.png) repeat-x fixed -130% 0,
        url(images/big-bubble.png) repeat-x fixed 40% 0,
        url(images/green-gra-bg.jpg) no-repeat center/cover fixed;
    background-color: #87d677;
}

for my own personal example I tested an example i found:

http://www.netmagazine.com/tutorials/get-grips-css3-multiple-background-images

body {
    background: 
        url(imgs/cloud.png) top center/800px no-repeat, 
        url(imgs/clouds-scatter.png) -46% -330px/500px repeat-x, 
        url(imgs/hills.png) bottom center repeat-x, 
        url(imgs/peaks.png) bottom right repeat-x;
}

The 800px and 500px sizes I add appear to be affecting each layer independent from one another.

Apply background-size to multiple background CSS line

You're setting:

background-image: <background-image-1>, <background-image-2>, ... <background-image-N>;

So you have to set:

background-size: <background-size-1>, <background-size-2>, ... <background-size-N>;

.perchas {

  width: 400px;

  height: 200px;

  background: linear-gradient(140deg, rgba(28, 121, 192, 0.85) 0%, rgba(3, 137, 255, 0.85) 100%), 

  url('https://via.placeholder.com/150');

  background-position: center;

  background-size: auto, cover;

}

<div class="perchas"></div>

Repeatable background image with gradient overlay + background-size

You can define a different background size for each background image:

.texture {

  width: 100%;

  height: 500px;

  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 1) 100%), url('https://cdna.artstation.com/p/assets/images/images/007/002/464/large/marcus-kennedy-1brickclean-render.jpg?1502928352');

  background-size: auto, 100px 100px;

}

<div class="texture"></div>

Is it possible to layer multiple background images in CSS

Is this what you were asking about?

div {
  height: 320px;
  
  background-image:
    url(https://pngimg.com/uploads/elmo/elmo_PNG90481.png),
    url(https://previews.123rf.com/images/kateph/kateph1803/kateph180300025/97623211-white-clouds-on-the-blue-sky-sky-texture.jpg);
  background-position: center, left top;
  background-size: 320px, 100vw;
  background-repeat: no-repeat, repeat;
}

<div>
  <p>This div has multiple background layers</p>
</div>

Change background on element with multiple background images

Using multiple background images on a single element, unfortunately, there's no way using pure CSS to set the second background image in a separate rule without repeating all the previous background layers.

jQuery to the rescue.

jsFiddle demo in action

Inside your CSS set the second background to none:

.banner_button{

    background: linear-gradient(
      rgba(0, 0, 0, 0.0),
      rgba(0, 0, 0, 0.6)
    ), none  50% / cover;  /* notice the `none` for the second layer */

    width: 100%;
    padding-bottom: 37.01%;
    position: relative;
    float: left;
}

while creating your elements, make sure to generate them passing the desired image URL from whatever data you use, >> inside a data-* attribute of your generated element:

<div class="banner_button" data-bg="../images/whatever.jpg"></div>

Than using jQuery, replace that none value with the value holded by the data-bg attribute:

$(".banner_button").css("backgroundImage", function(i, v){
  return v.replace("none", "url("+ $(this).data("bg") +")" );
});

That's it.

jQuery will rebuild the whole background layers for you!

Can I have multiple background images using CSS?

CSS3 allows this sort of thing and it looks like this:

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

The current versions of all the major browsers now support it, however if you need to support IE8 or below, then the best way you can work around it is to have extra divs:

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>

body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}

With CSS, can I set multiple backgrounds from different classes?

There's no way to merge the background attribute using multiple classes -- it can only be set once. What you could do is:

1. create a container div (position: relative)
2. place multiple divs inside the container (position: absolute)
3. apply a separate class to each sub-div
4. The images can each be positioned within the container by using top: 0px; left: 0px;, and with background-position.

Here's an example of what I mean:

HTML

<div class="container">
    <div class="first"></div>
    <div class="second"></div>
</div>​

CSS

html, body { height: 100%; }
div { 
    display: inline-block;
    width: 400px; 
    height: 100px; 
}
.container {
    position: relative;
}
.first, .second {
    position: absolute;
    left: 0;
    top: 0;
}
.first { 
    background: url(http://lorempixel.com/200/100/sports/1) no-repeat; 
}
.second { 
    background: url(http://lorempixel.com/200/100/sports/2) no-repeat; 
    background-position: right center;
}

http://jsfiddle.net/32G4A/2

Can I position and size a linear-gradient within the background?

Never forget background-repeat

html {
  min-height: 100%;
  background-image: 
    linear-gradient(to right, #00000000 0%, #00000000 15%, #000000ff calc(100% - 40rem)), 
    linear-gradient(to right, #000000ff 0%, #000000ff 100%), 
    url("https://picsum.photos/id/1069/800/800");
  background-size: cover, 40rem 4rem, auto;
  background-position: top left, 0rem 3rem, top left;
  background-repeat:no-repeat; /* this is important !! */
}

positioning several background layers

The background image set at 50% will be centered (so part of it is hidden under the first background image).

This snippet positions the second background image to the right and the first to the left.

[This snippet uses linear-gradients as images just to prove that it works OK].

#wrapper {
  background-color: pink;
  background-image: linear-gradient(red, red), linear-gradient(blue, blue);
  background-repeat: no-repeat, no-repeat;
  background-position: left top, right top;
  background-size: 50% 70%, 50% 50%;
  height: 100vh;
  /* added so we can see some height */
  width: 100vw;
}

<div id="wrapper">...here my content</div>

---

Related Topics