CSS Two Background Images

Two background images, one with a percentage size and the other one cover what's left?

Use multiple background and some padding, background-origin trick. The idea is to define padding as half the width and put the image on the content-box which will be the other half.

You have to use vw unit but there is a small drawback as it consider the width of the scroll. It can also be an issue if the div is not meant to be a full width div.

.box {

  padding-left:50vw;

  height:300px;

  background:

    linear-gradient(red, yellow) left/50vw 100%,

    url(http://placehold.it/400x400) center/cover content-box;

  background-repeat:no-repeat;

}

  

body {

  margin:0;

}

<div class="box"></div>

Multiple background images - Can't bring image to the front

You are using the background-image property to modify the the background-position/background-repeat properties. Using the background shorthand property (not background-image), you could use something like this:

background: url("..") no-repeat 3%, 50%;

Which is essentially just:

background-image: url("..);
background-repeat:no-repeat;
background-position:3%, 50%;

Now, according to the spec - for multiple backgrounds the syntax is as follows:

[ <bg-layer> , ]* <final-bg-layer>

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> 
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

Therefore, you would use the following:

WORKING EXAMPLE HERE

background: url("//placehold.it/100") no-repeat 3%, 50%,
           -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aa2329), color-stop(100%, #bb4d50)),
           -webkit-linear-gradient(#aa2329, #bb4d50);
background: url("//placehold.it/100") no-repeat 3%, 50%,
           -moz-linear-gradient(#aa2329, #bb4d50);
background: url("//placehold.it/100") no-repeat 3%, 50%,
            -o-linear-gradient(#aa2329, #bb4d50);
background: url("//placehold.it/100") no-repeat 3%, 50%,
            linear-gradient(#aa2329, #bb4d50); 

How to have two background-images with CSS?

Well, you could say something like:

.double {
  background-image: url('first_image.png') url('second_image.png');
}

From there on, when using properties such as background-position or background-size, you'll need to have two comma-separated values to apply to the individual images.

---

Related Topics