How to align text over an Image in a responsive webpage

Question

This is not a duplicate as I am talking about responsive websites

This is the header I want and I would like it to be responsive. What I want

However Instead of using it as an Image I would like to have the image and text separate. here is the original image file original image file

The Header image currently scales correctly for a responsive page however I would like the text positioned over the image like in my first image and have it scale according to the device the user uses.

I would like to accomplish this using html and css only.

HTML

<div id="header">
 <img src="images/Header.jpeg" alt=""/>
 <h1>Mark Osullivan</h1>
 <h2>Wedding Photograpgy </h2>
</div>

CSS

#header img {
 width: 100%;
 max-width: 1024px;
}   

#header h1 {
 color: #FFFFFF;
 text-shadow: 3px 3px #000000;
 font-size: 50px;
}

#header h2 {
 color: #FFFFFF;
 text-shadow: 3px 3px #000000;
 font-size: 35px;
}

Mandarr Sant · Accepted Answer · 2016-10-15T13:56:31.397

0

is this output r u expecting

check the output in jsbin

#header img {
  width: 100%;
  max-width: 1024px;
  position: absolute;
  z-index: -1;
}
#header h1 {
  color: #FFFFFF;
  text-shadow: 3px 3px #000000;
  font-size: 50px;
  position: relative;
  z-index: 10;
   text-align:center;
 
}
#header h2 {
  color: #FFFFFF;
  text-shadow: 3px 3px #000000;
  font-size: 35px;
   text-align:center;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <div id="header">
    <img src="https://i.stack.imgur.com/JGpzd.jpg" />
    <h1>Mark Osullivan</h1>
    <h2>Wedding Photograpgy </h2>
  </div>
</body>

</html>

edited Oct 15 '16 at 13:56

answered Oct 15 '16 at 13:38

Mandarr Sant

457
9
22

1

Correct but I would also Like the size of the text to scale with the image. – Mark Oct 15 '16 at 14:02
can u explain more – Mandarr Sant Oct 15 '16 at 14:03
1

and thank you for the repy – Mark Oct 15 '16 at 14:04
in my example image the size of the text scales according to what device you use, check it out and resize your browser window and you will see what I mean – Mark Oct 15 '16 at 14:05
check this link might help u http://stackoverflow.com/questions/19744177/scaling-text-and-image-in-css – Mandarr Sant Oct 15 '16 at 14:10
Yea I think the best solution is to use an image with the text already on it, – Mark Oct 15 '16 at 14:13

score 0 · Answer 2 · answered Oct 15 '16 at 14:03

0

Id go with the one above too. Use your image as a background and put the text in the div on the top

Oh and to scale your text just make the font size in vw or em. However in my exp ive gotten away with just using pixels to specify font size and just have the size change in media queries as you go down.

Hope that helps

answered Oct 15 '16 at 14:03

Allan

351
1
2
11

I agree with changing the size of the text in px according to media queries, the answer you agreed with is half working, the only problem now is adjusting the height of the background image as the device screen size gets smaller – Mark Oct 15 '16 at 15:03
Okay so set the height of the div in vw too. – Allan Oct 15 '16 at 18:45

Md Sifatul Islam · Answer 3 · 2016-10-15T14:23:17.430

-1

You can set the image as the background of the header and align your text in the center

#header  {
 width: 100%;
 max-width: 1024px;
 background-image:url("https://i.stack.imgur.com/JGpzd.jpg");
  background-size: 100% 100%;
    background-repeat: no-repeat;
}   

#header h1 {
 color: #FFFFFF;
 text-shadow: 3px 3px #000000;
 font-size: 50px;
}

#header h2 {
 color: #FFFFFF;
 text-shadow: 3px 3px #000000;
 font-size: 35px;
}
#header h1, #header h2{
  text-align:center;
}

<div id="header">
 
 <h1>Mark Osullivan</h1>
 <h2>Wedding Photograpgy </h2>
</div>

edited Oct 15 '16 at 14:23

answered Oct 15 '16 at 13:52

Md Sifatul Islam

846
10
28

I tried that, however the image does not respond to the device size correctly, but thank you for the suggestion – Mark Oct 15 '16 at 14:11
@MarkOsullivan can you please check it now! I have updated the code for you. thank you! – Md Sifatul Islam Oct 15 '16 at 14:24
its getting there thank you, The image is scaling horizontally but its staying at the same height no-matter my screen size, thank you for the help – Mark Oct 15 '16 at 14:34

How to align text over an Image in a responsive webpage

3 Answers3