CODEWITHSUNDEEP
htmlcssimageresponsive
Veronica Jones
Veronica Jones

Reputation: 9

How to get code a text overlay and image to be responsive?

I am attempting to re-create something similar to this image below, minus the little page curl in top right hand corner.

Banner Example:

Banner Example

I am adding the code to a previously coded website by another designer. I am first coding it separately, but cannot get the text and banner to be responsive, though the image is. Nor can I get it to overlay like I wish on the image itself.

Here is my code below, I know it is something simple but seem to be hitting a mental wall.

@charset "UTF-8";
/* CSS Document */

/*Header Image*/

.headerimage
	
img 
{
}

h1
{
position: absolute;
display: block;
width: 100%;
font-size: 1.45em;
font-family: 'Roboto Slab', Rockwell, Serif;
font-weight: bold;
color: #FFF;
text-shadow: 0 .125em .125em rgba(0, 0, 0, .5);
padding: .6em 1em .6em 1.7em;
background: linear-gradient(to right, rgba(178,34,34,0) 0%,rgba(169,32,32,0.8) 5%,rgba(160,30,30,1) 50%,rgba(152,29,29,0.8) 75%,rgba(178,34,34,0) 100%);
}

.interior-header img
{
display: block;
position: relative;
width: 100%;
height: auto;
border: 1px solid #b22222;
padding: 1px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test Heading</title>

<link rel="stylesheet" type="text/css" href="style.css"/>

</head>

<body>


<div class="interior-header img>
<div class="headerimage">

<img src="images/Joslyn-Interior-Images.jpg" width="630" height="240" alt="Traffic Control" />

<h1>Traffic Control</h1>

</div>
</div>


</body>
</html>

Traffic Violations Image

Upvotes: 0

Views: 332

Answers (1)

norcal johnny
norcal johnny

Reputation: 2115

I didn't want to type out all your code so here is an example.

Note: When I posted this one, no codes were up, I left it up in case it helps others. The code for the answer is at the bottom of the answer. https://jsfiddle.net/norcaljohnny/5o95L0qy/

.box {
background: grey;
height: auto;
width: 100%;
}
.text {
font-size: 6vw
}

Updated: Here is the current JsFiddle. Hope this helps. https://jsfiddle.net/norcaljohnny/65wnds86/

Upvotes: 3

Related Questions