How to Add a Background Image on Top of a Previous Background Image

How to add a background image on top of a previous background image?

You can consider CSS variables. Specify 2 background layer that you can change later. You can easily scale to any number of background:

.container > div {

  background:

    /*we make the default value a transparent image*/

    var(--im1,linear-gradient(transparent,transparent)),

    var(--im2,linear-gradient(transparent,transparent)); 

    

  height:200px;

  width:200px;

  display:inline-block;

}

.background1 {

  --im2: url(https://picsum.photos/200/300?image=0);

}

.background2 {

  --im2: url(https://picsum.photos/200/300?image=1069);

}

.backgroundFilter {

  --im1: linear-gradient(to right,transparent,green);;

}

<div class="container">

<div class="background1">...</div>

<div class="background1 backgroundFilter">...</div>

<div class="background2">...</div>

<div class="background2 backgroundFilter">...</div>

</div>

Need background image over another background image

There are two options, either use the CSS3 multiple backgrounds:

background-image: url(eagle.png), url(background-image.png);
background-position: left top, center top;
background-repeat: no-repeat;

or position the eagle over the background using position:Absolute;

How to make a background color appear on top of a background image

use :before or :after

body {

    width: 100%;

}

/*Header*/

 #header {

    width: 100%;

    background: url(http://zarech63.ru/sites/default/files/imagecache/product_full/product/motor-lodochnyy-suzuki-dt15as_623487.jpg) no-repeat center center;

    background-size: cover;

    display: -webkit-flex;

    /*For Safari 7 and 8*/

    display: flex;

    -webkit-flex-direction: column;

    flex-direction: column;

    -webkit-justify-content: center;

    justify-content: center;

    position: relative;

}

#header:before{

    content: '';

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,0.5); 

    position: absolute; top: 0; left: 0;

}

header {

    display: -webkit-flex;

    display: flex;

    -webkit-flex-direction: column;

    flex-direction: column;

    -webkit-justify-content: center;

    justify-content: space-between;

    position: relative;

}

header h1, header p:last-of-type {

    font-family:"Proxima Nova Extrabold";

    color: white;

    text-transform: uppercase;

    font-size: 3.75em;

    text-align: center;

}

h1 + p {

    font-family:"Palatino";

    color: white;

    font-size: 2.5em;

    text-align: center;

}

<!-- Header -->

    <section id="header">

        <header>

             <h1>Example</h1>

            <p>Example</p>

            <p>Example</p>

        </header>

    </section>

How to add a color overlay to a background image?

I see 2 easy options:

• multiple background with a translucent single gradient over image
• huge inset shadow

gradient option:

html {
  min-height:100%;
  background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
}

shadow option:

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2);
  background-size:cover;
  box-shadow:inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}

an old codepen of mine with few examples

---

a third option

• with background-blen-mode :
  
  

  The background-blend-mode CSS property sets how an element's background images should blend with each other and with the element's background color.

html {
  min-height:100%;
  background:url(http://lorempixel.com/800/600/nature/2) rgba(255, 0, 150, 0.3);
  background-size:cover;
  background-blend-mode: multiply;
}

CSS: Centering a background image on top of a repeating background image

background: url("images/headerLayer.png") no-repeat center top #fff;

or

background: url("images/headerLayer.png") no-repeat 50% 0 white;

CSS show div background image on top of other contained elements

I would put an absolutely positioned, z-index: 100; span (or spans) with the background: url("myImageWithRoundedCorners.jpg"); set on it inside the #mainWrapperDivWithBGImage .

---

Related Topics