褪色背景图像和顶部图像

Question

I am trying to create a div that has a fading background image with another fixed image ontop of this. The svg image I am trying to add ontop of the doesn't stay fixed with the div, It also fades in and out with the background. How can i stop the img fading and keep centered in the div? I have tried using absolute position but when the page is in mobile view the image moves offscreen,

This is what i have currently.

<div class="slideme" id="slideme"> 
  <img style="max-width: 90%; "src="img/header-logo.svg" class="img-responsive">                    
</div> 

CSS:

#slideme{
  position:relative;
  width:100%;
  height:200px;
}

#slideme div{
  position:absolute;
  width:100%;
  height:200px;
}

Answer 1

The problem is that when you fade out the div, you fade out also the contents of that div. Basically, all goes away, including your second svg image which is contained by the #slidme div which also have the other image as background.

First, you should probably refactor your code to look more like this:

<div class="main-slider-container">
    <img style="max-width: 90%; "src="img/header-logo.svg" class="img-responsive">
    <div class="slideme" id="slideme"></div>    
</div>

CSS

.main-slider-container{
  position:relative;
}

#slideme div{
  position:absolute;
  width:100%;
  height:200px;
  top:0px;
  right:0px;
  z-index:0;
}

> img {
  position:absolute;
  width:100%;
  height:200px;
  top:0px;
  left:0px;
  z-index:1;
}

With this structure, you can individually, hide the #slideme div without affecting the svg image