CODEWITHSUNDEEP
htmlcssimage
ValleyDigital
ValleyDigital

Reputation: 1470

Best practice to use an image as the background with an overlaying heading inside a div

I am creating a website, and I have an image at the top of my page. The image size is 1920x650 pixels. I am trying to code this correctly, and would like to know what is the best practice for placing images inside divs with heading text overlaying the image? I want the image to always be at 100% width, too.

Currently, I have tried this code, but when the image is at width:100%, and max-height: 600px; the size of the div cuts off the bottom of the image and butts up at the bottom of the heading text. I think it has something to do with my margin of the heading text. I am using a margin-top: -150px; for the heading, to achieve the text in the location where I want it to overlay on the image. Here is my code:

html:

<div id="welcome">
<img src="img/welcome.jpg" alt="Welcome">
<h2>Welcome to my website</h2>
</div>

with the css:

#welcome{
width:100%
max-height: 600px;
overflow: hidden;
}
#welcome img{
width: 100%;
}
#welcome h2{
margin-top: -150px;
color: #B0171f;
}

If I remove the margin-top: -150px; from my heading, the image fills up the div. Any help would be appreciated with what I am trying to achieve. Thank you in advance.

Upvotes: 2

Views: 1614

Answers (3)

Chris Middleton
Chris Middleton

Reputation: 5942

Using the CSS background-image property, you can achieve this with very little code. Just make it the background-image of the h2 itself.

HTML:

<h2 id="welcome">Welcome to my website</h2>

CSS:

<style>
#welcome {
    width:100%;
    background-image: url("http://www.tilemountain.co.uk/media/catalog/product/cache/1/image/1000x/040ec09b1e35df139433887a97daa66f/p/r/prismatics_prv4_victorian_maroon_200x100-1600.jpg");
    color: #B0171f;
}
</style>

http://jsfiddle.net/#&togetherjs=DfmkLBOPVu

I don't think this is identical to the look you're currently going for, but it's a better foundation for what you're trying to do.

Upvotes: 1

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85613

You should use the position instead of negative margin:

#welcome{
width:100%
max-height: 600px;
overflow: hidden;
position: relative; /* applied for parent div */
}
#welcome img{
width: 100%;
}
#welcome h2{
position: absolute;
top: 50px; /* change what position you need */
z-index: 2; /* higher than image layer */
color: #B0171f;
}

Upvotes: 1

Sunil Hari
Sunil Hari

Reputation: 1776

You can set the image as a background to the div welcome.Adjust the background-position to place the image at the desired position in the div using the css property background-position

html

<div id ="welcome">
<h2>Welcome to my website</h2>
</div>

css

#welcome {
    width:100%;
    height: 600px;
    overflow: hidden;
    background:url('http://media1.santabanta.com/full1/Football/Football%20Abstract/football-abstract-9a.jpg') no-repeat;
}
#welcome h2 {
    color: #B0171f;
}

DEMO

Read more on background-position

Upvotes: 1

Related Questions