CODEWITHSUNDEEP
htmlcss
MattM
MattM

Reputation: 3217

Text with Css background-color over image

I want a div with text in it to appear above an image. You can (kind of) see what I am trying to do here: http://innerwestadv.com/odom/ in the bottom right corner contact box. The text appears above the image but the background color appears below.

Here is the HTML: 

<div class="visible-all-devices ftr-widget">
<h2>Contact</h2>
<div class="textwidget">
    <p><a href="http://innerwestadv.com/odom/contact/"><img width="328" height="254" alt="map" src="http://innerwestadv.com/odom/wp-content/uploads/2015/05/map.jpg" class="aligncenter size-full wp-image-121"></a></p>
    <div class="contact-box">
      <h4>One Day One Million</h4>
      <p>(775)359-3000 x 129<br>
      985 Damonte Ranch Parkway<br>
      Suite 310<br>
      Reno, NV 89521
    </p>
</div>
</div>
</div>

And the CSS:

.contact-box {
    background-color: rgba(2, 54, 110, 0.8) !important;
    margin: -140px auto 0;
    padding: 10px;
    width: 80%;
}

How can I get the box to appear above the image?

Upvotes: 0

Views: 1201

Answers (4)

evalunamain
evalunamain

Reputation: 46

Set .textwidget to position relative and instead of a negative margin on contact-box, position it absolute. I'm not sure why you had !important on the background-color, as you don't need it.

.textwidget {
    position: relative
}

.contact-box {
    background-color: rgba(2, 54, 110, 0.8);
    position: absolute;
    padding: 10px;
    width: 80%;
    bottom: 0;
}

https://jsfiddle.net/kavzh6n5/

Edit: to have your text span exactly the full width of the image, add 'display: inline-block' to .textwidget, and 'width: 100%' to .contact-box. Updated fiddle here: https://jsfiddle.net/kavzh6n5/1/

Upvotes: 1

Tomer Almog
Tomer Almog

Reputation: 3868

you need to use

.textwidget{
    position:relative;
}

for the parent and then the <p> and <div class="contact-box"> can be have 

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

and that will be relative to the parent. you can also use z-index to determine the order.

Upvotes: 0

Irvin Lim
Irvin Lim

Reputation: 2451

Use absolute positioning:

First, set position:relative; on parent container:

div.textwidget {position:relative;}

Next, put absolute positioning on box (add these on to your styles above):

.contact-box {
    position:absolute;
    bottom:0;
    left:10px;
}

Upvotes: 0

dojs
dojs

Reputation: 517

.contact-box {
  /* Add this */
  position: absolute;

  background-color: rgba(2, 54, 110, 0.8) !important;
  margin: -140px auto 0;
  padding: 10px;
  width: 80%;
}

Upvotes: 0

Related Questions