Place a text on top of an image

Question

I want to place an image in the center of my white page and add a title over it (the title would be larger than the image || also the title center must be the image center). The problem is that the title won't go on top of the image.

I use Django and bootstrap ^^

Here is the code :

HTML :

<div class="col-md-7 white nopadding text-center">
            <div class="brand">
                Brand
            </div>
            <div class="heading">
                <img src="{% static '/eyemeet/hero.jpg' %}" class="hero">
                <div class="title ctr">Title</div>
</div>

CSS:

.hero {
    width: 65%;
    height: auto;
}

.title {
    position: absolute;
    background-color: cadetblue;
    top: 50%;
    left: 50%;
}

.ctr {
    position: absolute;
    transform: translate(-50%, -50%);
}

What happens currently :

EDIT :

I found the answer !! I hope it can help the ones who still wonder how to do it :) Center text over an image in flexbox

I think you need to add some more of your CSS because your provided code is working fine: https://jsfiddle.net/17bofkqa/ — John, Jan 07 '21 at 19:37

ramilabbaszade · Answer 1 · 2021-01-07T19:49:01.290

0

Parent element has to be position:relative and then positioning will contain only inside this parent element

.heading{
  position:relative;
}
.title{
  position:absolute;
  top:50%;
  right:50%;
}

edited Jan 07 '21 at 19:49

answered Jan 07 '21 at 19:35

ramilabbaszade

62
2
11

Ankit Tiwari · Answer 2 · 2021-01-08T04:31:07.553

0

.hero {
    width: 65%;
    height: auto;
}

.title {
    position:absolute;
    top:55%;
    left:50%;
    transform:translate(-50%,-50%);
    background-color: cadetblue;
    width:100px;
    font-size:40px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-7 white nopadding py-3 text-center">
            <div class="brand py-2">
                Brand
            </div>
            <div class="heading">
 
                <img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fgetwallpapers.com%2Fwallpaper%2Ffull%2Ff%2F3%2Fa%2F807159-download-funny-cats-wallpapers-1920x1200-meizu.jpg&f=1&nofb=1" class="hero">
  <div class="title text-center ml-auto mr-auto ">Title</div>               
</div>

edited Jan 08 '21 at 04:31

answered Jan 07 '21 at 19:49

Ankit Tiwari

4,438
4
14
41

Hey, thanks for your answer. It works, but the title is not centered. Is it possible to use % instead of px ? So that the title can be 50% from the top of the image – Bonsaï Jan 07 '21 at 20:44
@Bonsaï check i edited my answer – Ankit Tiwari Jan 08 '21 at 04:33

Place a text on top of an image

2 Answers2