Overwrite image with a DIV

Asked

Viewed 49,868 times

4

How do I place a DIV over a <'img image'> ?

inserir a descrição da imagem aqui

HTML 

<div id="main-banner">

<img src="images/wall.jpg" />

<div id="main-banner-content"></div>

</div>

CSS

#main-banner {
    padding: 0;
    width: 1000px;
    height: 330px;
    overflow: hidden;
    background: blue
}
#main-banner-content {
    height: 250px;
    width: 700px;
    float: right;
    margin: 40px 60px;
    background: #555;
}
css
  • 1

    Can you explain better how you want the div to behave? Explain the context better. This is simple, but it can vary as you do depending on the use you want to give and whether the rest of the HTML is fixed or responsive. For example: http://jsfiddle.net/t0spre9g/

  • It is fixed, it would be in a layout like this: http://s8.postimg.org/7ee88htlh/image.jpg

  • 1

    Okay, serve the jsFiddle that I put in the Department above ^ ?

  • Yes, he was on top, but the div was on the left coming out of the block, there is some way to put it on the right without having to put gigantic values on the top/left?

3 answers

5

You can insert the image inside a div with relative position and inside this div, another div with Absolute position, for example:

div.img{position: relative; width: 480px; height: 300px}
div.img > img{width:100%; height: 100%}
div.img > div{position: absolute; left: 50%; margin-left: -120px; top: 50%; margin-top: -75px; background-color: black; width:50%; height: 50%; color: #FFF;}
<div class="img">
  <img src="http://www.hdwallpapers.in/walls/windows_xp_bliss-wide.jpg" />
  <div>DIV</div>
</div>

4

See below some possibilities of how to do.

Option 1

Using a div with an image in background.

Demo

html,
body {
  height: 100%;
  min-height: 100%
}
.background {
  background: url(http://www.hdwallpapers.in/walls/windows_xp_bliss-wide.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
}
.superior {
  width: 40%;
  height: 200px;
  text-align: center;
  background: #000;
  font-size: 30px;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
<div class="background">
  <div class="superior">DIV</div>
</div>

Option 2

We put a div to control the image. In the image we set its position as absolute and the div internal also, in that case there is no need to set the div internal as absolute in both cases will work.

Demo - Position: Absolute

.control {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}
.control img {
  position: absolute;
  top: 0;
  left: 0;
}
.superior {
  width: 40%;
  height: 200px;
  text-align: center;
  background: #000;
  font-size: 30px;
  color: #fff;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
<div class="control">
  <img src="http://www.hdwallpapers.in/walls/windows_xp_bliss-wide.jpg" alt="" />
  <div class="superior">DIV</div>
</div>

Demo - Position: relative

.control {
  position: relative;
  width: 100%;
  height: 500px;
}
.control img {
  position: absolute;
  top: 0;
  left: 0;
}
.superior {
  width: 40%;
  text-align: center;
  background: #000;
  font-size: 30px;
  color: #fff;
  padding: 100px;
  margin: 0 auto;
  position: relative;
}
<div class="control">
  <img src="http://www.hdwallpapers.in/walls/windows_xp_bliss-wide.jpg" alt="" />
  <div class="superior">DIV</div>
</div>

A piece of advice is to use the first option, in such cases use background-size:cover the image tends to behave better.

  • Thanks, I get option 2 because the image will be dynamically changed.

0

A solution that greatly simplifies is to place the image as the background of a div, which in turn contain another.

That is to say:

#main-banner {
    width: 500px;
    height: 200px;
    background: url("http://wallpapercow.com/wp-content/uploads/2014/06/Google-GMail-Desktop-Wallpaper.jpg");
    background-size: cover;
}
#main-banner-content {
    height: 100px;
    width: 200px;
    background: #555;
    margin: auto;
}
<div id="main-banner">
    <div id="main-banner-content"></div>
</div>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.