Css- Multiple Background Image

Multiple CSS 3 background images - Add opacity to the top image

You can do it with pseudo element:

#example1 {
  position: relative;
  width: 500px;
  height: 250px;
  background: url(http://goldenageofgaia.com/wp-content/uploads/2012/09/Field-flowers-image7.jpg) 60% 60% no-repeat;
}

#example1:after {
  content: "";
  position: absolute;
  top: 10%;
  left: 10%;
  opacity: .7;
  z-index: 10;
  width: 100px;
  height: 100px;
  background: url("http://www.butterflyskye.com.au/Monarch%20Butterfly%202.jpg");
 }

http://jsfiddle.net/Let8U/

Multiple background images positioning

Your problem is that the repeat-y is going to fill the whole height, no matter where you position it initially. Thus, it overlaps your top and bottom.

One solution is to push the repeating background into a pseudo element positioned off of the container by the 12px at the top and bottom. The result can be seen here (the opacity in the demo is just to show that there is no overlap going on). Without opacity, see here. The relevant code (tested in CSS3 browsers: IE9, FF, Chrome):

CSS

div {
    position: relative;
    z-index: 2;
    background: url(top.png) top left no-repeat, 
                url(bottom.png) bottom left no-repeat;
}

div:before {
    content: '';
    position: absolute;
    z-index: -1; /* push it to the background */
    top: 12px; /* position it off the top background */
    right: 0;
    bottom: 12px; /* position it off the bottom background */
    left: 0;
    background: url(middle.png) top left repeat-y;
}

If you needed or wanted IE8 support (which does not support multiple backgrounds), then you could put the top background in the main div, and put the bottom background in by using the div:after pseudo element positioned to the bottom of the container.

How to transition multiple background images of an element with CSS only

Look into CSS animation property.

This snippet will give you an idea...

#slideshow {  border: 1px solid gray;  height: 330px;  width: 592px;  -webkit-animation-name: background;  -webkit-animation-duration: 5s;  -webkit-animation-direction: alternate;  -webkit-animation-timing-function: linear;  -webkit-animation-iteration-count: infinite;}
@-webkit-keyframes background {  0% {    background-image: url('http://sipi.usc.edu/database/preview/aerials/2.1.07.png');  }  33% {    background-image: url('http://sipi.usc.edu/database/preview/aerials/2.1.06.png');  }  100% {    background-image: url('http://sipi.usc.edu/database/preview/aerials/2.1.12.png');  }}

<div id="slideshow"></div>

Applying gray scale only to one background image using Multiple Backgrounds in CSS?

This is a bit hack-y but you can add an overlay that contains the "hover" photo and add the greyscale filter to it. Take a look at this example - it is just using 2 images and both are in colour.

(FYI I have specified the height & width of the div for this example, but its not necessary)

#example1 {
background-image: url(https://lorempixel.com/output/nature-q-c-200-200-2.jpg), url(https://lorempixel.com/output/nature-q-c-200-200-5.jpg);
  background-position: right bottom, left top;
  background-repeat: no-repeat, no-repeat;
  height: 200px;
  width:400px;
  position:relative;
  border:1px solid #ccc;
}

#example1:hover:before {
  background-image: url(https://lorempixel.com/output/nature-q-c-200-200-5.jpg);
  background-position: left top;
  background-repeat: no-repeat;
  filter: grayscale(100%);
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;  
  z-index:10;
}

<div id="example1"></div>

---

Related Topics