CODEWITHSUNDEEP
cssbackground-image
lisarko8077
lisarko8077

Reputation: 307

Align 2 images in background in a div

I would like to put 2 images as background image inside a div.

This is the code i put but i see only the second image.

#wrap-header {
  max-width: 100%;
  height: 400px;
  background-image: url("../assets/header_background.png"), url("../assets/circle_header_background.png");
  background-repeat: no-repeat;
  background-position: center bottom, center top;
}

<div id="wrap-header">

</div>

I want to retrieve the effect of the one image under the other, or one image as first layer and the second up at the bottom.

I can't find a way. Could you pease help me ?

Upvotes: 0

Views: 407

Answers (4)

VXp
VXp

Reputation: 12078

You can simply do it with the background-size: 100% 50% where the first value of 100% indicates the width of the image, and the second one its height, which is set to 50% or always half of the #wrap-header's height:

#wrap-header {
  /*max-width: 100%; by default*/
  height: 400px;
  background-image: url('https://placeimg.com/1600/200/any'), url('https://placeimg.com/1600/201/any');
  background-repeat: no-repeat;
  background-position: bottom, top;
  background-size: 100% 50%;
}
<div id="wrap-header"></div>

Upvotes: 2

Zuber
Zuber

Reputation: 3473

You can use :before and :after pseudo selector to achive this

/* Set #wrap-header to relative so that :before and :after does not goes outside */
#wrap-header {
  max-width: 100%;
  height: 400px;
  position: relative;
}

#wrap-header:before,
#wrap-header:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

/* Set First Background Image */
#wrap-header:before {
  background: url("http://via.placeholder.com/850x450") center bottom no-repeat;
}

/* Set Second Background Image */
#wrap-header:after {
  background: url("http://via.placeholder.com/900x450") center top no-repeat;  
  opacity: 0.3; /* Set transparency as per your requirement */
}
<div id="wrap-header">

</div>

Upvotes: 0

Shahil Mohammed
Shahil Mohammed

Reputation: 3868

This can be done with a help of pseudo elements :before and :after

#wrap-header {
  max-width: 100%;
  height: 400px;
}

#wrap-header:before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("https://boutiqueme.com/static/4/generated/30-pattern-44-ff81c0.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#wrap-header:after {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("https://cdn.pixabay.com/photo/2016/04/12/00/04/hero-1323464_960_720.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
<div id="wrap-header">

</div>

Upvotes: 0

Nacorga
Nacorga

Reputation: 526

You can do this using the CSS selectors :after and :before

First, add the following to #wrap-header:

#wrap-header {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    height: 400px;
}

And then use the selectors:

#wrap-header:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background-image: url('image1');
    background-repeat: no-repeat;
    background-position: center
}

#wrap-header:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background-image: url('image2');
    background-repeat: no-repeat;
    background-position: center;
}

Upvotes: 2

Related Questions