Overlay image with a DIV

Question

Overlay image with a DIV

Navigation

#1 by (5 votes)
#2 by (3 votes)
#3 by (0 votes)

4

How do I put a DIV on an image > ?

HTML

<divid="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

asked by anonymous 09.12.2014 / 06:14

3 answers

Get property values from a class Save full path in the bank or just the name with the extension?

score 5 · Answer 1

You can insert the image inside a div with position relative 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>

score 3 · Answer 2

See some possibilities below for how to do it.

Option 1

Using 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 div internal also, in this 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>

One advice is to use the first option, in these cases use background-size:cover the image tends to behave better.

score 0 · Answer 3

A solution that simplifies a lot is to put the image as the background of a div, which in turn contains another.

That is:

#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>