CODEWITHSUNDEEP
htmlcss
Yabo
Yabo

Reputation: 77

Positioning a box below an image background

I got the image and the box working accordingly so far. However my problem is, when I go to add height, it goes up instead of down.

My fiddle - https://jsfiddle.net/kg6pLk4e/

.post {
    height: 255px;
    font-size: 14px;
    position: relative;
    padding: 5px;
    margin-right: 3%;
    margin-top: 3%;
}
.box-one {
    background-image: url("http://www.getmdl.io/templates/blog/images/coffee.jpg");
    background-repeat: no-repeat;
    background-size: cover;
}
.image-text {
    position: absolute;
    width: 100%;
    margin: 0;
    left: 0;
    font-weight: bold;
    color: white;
    text-align: center;
    background: black;
    bottom: 0;
    padding: 5px;
    height: 40px;
}
<div class="late-post grid-60 tablet-grid-50 mobile-grid-100">
    <div class="post box-one">                                                  
        <h1>Pottery</h1>
        <p class="image-text">Lorem Ipsum is simply dummy text of the printing and</p>                                                  
    </div>
</div>

Basically, I want to add content inside the image-text but rather the box go up, I want it to go down. Here's what I'm talking about:

enter image description here

Note: the white box is going up covering the image. I don't want it to cover the image. I want the white box to go down instead of up with an adjusted height.

Upvotes: 1

Views: 536

Answers (3)

Stickers
Stickers

Reputation: 78686

For known height, edit the bottom value to match the container's height.

.image-text {
    bottom: -40px;
    height: 40px;
}


.post {
    height: 100px;
    width: 500px;
    font-size: 14px;
    position: relative;
    /* padding: 5px; */
    /* margin-right: 3%; */
    /* margin-top: 3%; */
}
.box-one {
    background-image: url("http://www.getmdl.io/templates/blog/images/coffee.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    /* outline: 5px solid blue; */
}
.image-text {
    position: absolute;
    left: 0;
    bottom: -40px;
    width: 100%;
    margin: 0;
    font-weight: bold;
    color: white;
    text-align: center;
    background: black;
    /* opacity: .5; */
    /* padding: 5px; */
    height: 40px;
    line-height: 40px;
}
<div class="post box-one">
    <h1>Pottery</h1>
    <p class="image-text">Lorem Ipsum is simply dummy text of the printing and</p>
</div>

If it's unknown height, you can use transform property.

.image-text {
    bottom: 0;
    transform: translateY(100%);
}


.post {
    height: 100px;
    width: 500px;
    font-size: 14px;
    position: relative;
    /* padding: 5px; */
    /* margin-right: 3%; */
    /* margin-top: 3%; */
}
.box-one {
    background-image: url("http://www.getmdl.io/templates/blog/images/coffee.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    /* outline: 5px solid blue; */
}
.image-text {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: 0;
    font-weight: bold;
    color: white;
    text-align: center;
    background: black;
    /* opacity: .5; */
    padding: 10px 0;
    /* height: 40px; */
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
}
<div class="post box-one">
    <h1>Pottery</h1>
    <p class="image-text">Lorem Ipsum is simply dummy text of the printing and</p>
</div>

Upvotes: 2

MrStank
MrStank

Reputation: 314

Try to just make the "height" a negative value. That should work, but I cannot gurantee that it will. So instead of:

height: 255px;

Do,

height: -255px;

Let me know how that works! :)

Upvotes: 0

Akul Von Itram
Akul Von Itram

Reputation: 1534

If I understand you question right. Your .box-one don't have position set. You must have set position of parent to have right effect on child element.

.box-one {
position:relative;
}
.image-text {
position:absolute;
}

Take a look here: https://css-tricks.com/absolute-positioning-inside-relative-positioning/

Upvotes: 0

Related Questions