Reputation: 13
I have been trying to keep the text inside the image when I resize the browser. I've tried floating it as well.
<div class="image">
<img src="background2.jpg">
<h1>Hello</h1>
</div>
And here is the CSS
.image img{
width: 90%;
display: block;
margin: auto;
position: relative;
}
h1{
position: absolute;
top: 50%;
left: 50%;
width: 100%;
}
Upvotes: 0
Views: 1202
Reputation: 53709
You want the parent element (.image
) to be position: relative
so that it's what the h1
will be absolutely positioned relative to. You can also give it the width and margin that center it at 90% of the page. Then make the image 100% width of the parent, and use top: 50%; left: 50%; transform: translate(-50%,-50%);
to absolutely center the text vertically and horizontally.
.image {
width: 90%;
display: block;
margin: auto;
position: relative;
}
.image img {
width: 100%;
display: block;
}
.stuff {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
}
<div class="image">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png">
<div class="stuff">
<h1>Hello</h1>
<h2>Foobar</h2>
</div>
</div>
Upvotes: 3
Reputation: 109
You can try making the image the background of the parent div:
<div class="image">
<h1>Hello</h1>
</div>
The css would look something like this:
.image {
background: url('background2.jpg') no-repeat center center;
background-size: cover;
}
Upvotes: 0