I want to make the .overlay div float on top of the "img/5.jpg". But I want the image to still resize and to stay at the top. As well as the banner at the top staying the same. Thank you! An example of this idea can be found at . I'd rather use just text with no background, I placed the text inside a div (.overlay) because it seemed like that would be easier to work with.
EDIT: I don't think I was being clear enough I want to effectively float .overlay on top of the image inside #maincontent1
@charset "utf-8";
/* CSS Document */
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
#wrapper{
height: auto;
width: 100%%;
}
.overlay {
width:53%;
padding:2% 2% 3%;
background-color: green;
background-repeat:repeat;
text-align:left;
z-index:1;
}
#maincontent1 h1{
z-index:100;
position:static;
color:white;
}
#maincontent1 img{
width: 100%;
position:static;
top: 0;
left: 0;
z-index:-1;
}
#maincontent2 {
clear: both;
}
#maincontent3 {
clear:both;
font-family: 'Raleway', sans-serif;
margin-left: 20%;
margin-right: 20%;
clear: both;
}
#maincontent4 {
width:100%;
clear: both;
}
#maincontent5 {
clear:both;
background-image: url(../img/3.jpeg);
padding-top: 10%;
padding-bottom: 10%;
}
.maincontent5_text{
clear:both;
font-family: 'Raleway', sans-serif;
margin-left: 12%;
margin-right: 12%;
background-color:#FFF;
clear: both;
border-color:#FFF;
border-style: solid; border-width: 10px;
}
.maincontent5_text h1{
display:inline;
font-family: 'Raleway', sans-serif; font-size: 30px;
text-align: right;
color: #F39C9C;
font-weight: 400;
padding-left: 5px;
}
#topbar {
margin-bottom: 0;
padding: 3px 0 3px 0;
background: #F39C9C;
width: 100%;
text-align: right;
color:white;
}
#topbar ul {
list-style: none;
margin: 0;
padding: 0;
}
#topbar ul li {
margin: 0;
padding: 0;
display: inline;
} <html lang="en">
<div id="wrapper">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href='' rel='stylesheet' type='text/css'>
<link href=':400,300' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="topbar">
<ul>
<li><a href="#">LOGO</a></li>
<li>Email</li>
<li>Telephone</li>
</ul>
</div>
<div id="maincontent1">
<img src=""/>
<div class="overlay">
<h1>Some Text Here</h1>
</div>
</div>
<style>
.menu1 p {
text-align: center;
font-family: 'Comfortaa', cursive;
font-size: 20px;
}
</style>
<div id="maincontent2">
<table width="100%" height="10%" border="0" class="menu1">
<tr>
<td onMouseOver="this.bgColor='#F39C9C',this.style.color='white'" onMouseOut="this.bgColor='white',this.style.color='#F39C9C'" bgColor="white" color="#F39C9C" width="25%"><p><a>Home</a></p></td>
<td onMouseOver="this.bgColor='#F39C9C',this.style.color='white'" onMouseOut="this.bgColor='white',this.style.color='#F39C9C'" bgColor="white" color="#F39C9C" width="25%"><p><a>About</a></p></td>
<td onMouseOver="this.bgColor='#F39C9C',this.style.color='white'" onMouseOut="this.bgColor='white',this.style.color='#F39C9C'" bgColor="white" color="#F39C9C" width="25%"><p><a>Portfolio</a></p></td>
<td onMouseOver="this.bgColor='#F39C9C',this.style.color='white'" onMouseOut="this.bgColor='white',this.style.color='#F39C9C'" bgColor="white" color="#F39C9C" width="25%"><p><a>Contact</a></p></td>
</tr>
</table><hr width="100%" color="#F39C9C">
</div>
<div id="maincontent3">
<h1 style="font-family: 'Raleway', sans-serif; font-size: 36px; text-align:center; color:#F39C9C; font-weight:400;"> "They were extremely good at responding to feedback and worked incredibly hard."</h1>
<p style="text-align:center; color:#A6A6A6;"> Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. </p>
</div>
<div id="maincontent4">
<iframe src=";disablekb=1&enablejsapi=1&iv_load_policy=3&rel=0&showinfo=0" width="100%" height="500px" frameborder="0" allowfullscreen=""></iframe>
</div>
<div id="maincontent5" >
<div class="maincontent5_text">
<img src="" style="display:inline; float: left;">
<h1 style=""> "They were extremely good at responding to feedback and worked incredibly hard."</h1>
<p style="text-align:center; color:#A6A6A6;"> Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. </p></div>
</div>
</div>I want to make the .overlay div float on top of the "img/5.jpg". But I want the image to still resize and to stay at the top. As well as the banner at the top staying the same. Thank you! An example of this idea can be found at http://thedreamcatchers.co.uk. I'd rather use just text with no background, I placed the text inside a div (.overlay) because it seemed like that would be easier to work with.
EDIT: I don't think I was being clear enough I want to effectively float .overlay on top of the image inside #maincontent1
@charset "utf-8";
/* CSS Document */
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
#wrapper{
height: auto;
width: 100%%;
}
.overlay {
width:53%;
padding:2% 2% 3%;
background-color: green;
background-repeat:repeat;
text-align:left;
z-index:1;
}
#maincontent1 h1{
z-index:100;
position:static;
color:white;
}
#maincontent1 img{
width: 100%;
position:static;
top: 0;
left: 0;
z-index:-1;
}
#maincontent2 {
clear: both;
}
#maincontent3 {
clear:both;
font-family: 'Raleway', sans-serif;
margin-left: 20%;
margin-right: 20%;
clear: both;
}
#maincontent4 {
width:100%;
clear: both;
}
#maincontent5 {
clear:both;
background-image: url(../img/3.jpeg);
padding-top: 10%;
padding-bottom: 10%;
}
.maincontent5_text{
clear:both;
font-family: 'Raleway', sans-serif;
margin-left: 12%;
margin-right: 12%;
background-color:#FFF;
clear: both;
border-color:#FFF;
border-style: solid; border-width: 10px;
}
.maincontent5_text h1{
display:inline;
font-family: 'Raleway', sans-serif; font-size: 30px;
text-align: right;
color: #F39C9C;
font-weight: 400;
padding-left: 5px;
}
#topbar {
margin-bottom: 0;
padding: 3px 0 3px 0;
background: #F39C9C;
width: 100%;
text-align: right;
color:white;
}
#topbar ul {
list-style: none;
margin: 0;
padding: 0;
}
#topbar ul li {
margin: 0;
padding: 0;
display: inline;
} <html lang="en">
<div id="wrapper">
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis./css?family=Comfortaa' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis./css?family=Raleway:400,300' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="topbar">
<ul>
<li><a href="#">LOGO</a></li>
<li>Email</li>
<li>Telephone</li>
</ul>
</div>
<div id="maincontent1">
<img src="http://placehold.it/1920x1080"/>
<div class="overlay">
<h1>Some Text Here</h1>
</div>
</div>
<style>
.menu1 p {
text-align: center;
font-family: 'Comfortaa', cursive;
font-size: 20px;
}
</style>
<div id="maincontent2">
<table width="100%" height="10%" border="0" class="menu1">
<tr>
<td onMouseOver="this.bgColor='#F39C9C',this.style.color='white'" onMouseOut="this.bgColor='white',this.style.color='#F39C9C'" bgColor="white" color="#F39C9C" width="25%"><p><a>Home</a></p></td>
<td onMouseOver="this.bgColor='#F39C9C',this.style.color='white'" onMouseOut="this.bgColor='white',this.style.color='#F39C9C'" bgColor="white" color="#F39C9C" width="25%"><p><a>About</a></p></td>
<td onMouseOver="this.bgColor='#F39C9C',this.style.color='white'" onMouseOut="this.bgColor='white',this.style.color='#F39C9C'" bgColor="white" color="#F39C9C" width="25%"><p><a>Portfolio</a></p></td>
<td onMouseOver="this.bgColor='#F39C9C',this.style.color='white'" onMouseOut="this.bgColor='white',this.style.color='#F39C9C'" bgColor="white" color="#F39C9C" width="25%"><p><a>Contact</a></p></td>
</tr>
</table><hr width="100%" color="#F39C9C">
</div>
<div id="maincontent3">
<h1 style="font-family: 'Raleway', sans-serif; font-size: 36px; text-align:center; color:#F39C9C; font-weight:400;"> "They were extremely good at responding to feedback and worked incredibly hard."</h1>
<p style="text-align:center; color:#A6A6A6;"> Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. </p>
</div>
<div id="maincontent4">
<iframe src="http://youtube./embed/2YBtspm8j8M?controls=0&disablekb=1&enablejsapi=1&iv_load_policy=3&rel=0&showinfo=0" width="100%" height="500px" frameborder="0" allowfullscreen=""></iframe>
</div>
<div id="maincontent5" >
<div class="maincontent5_text">
<img src="http://placehold.it/200x200" style="display:inline; float: left;">
<h1 style=""> "They were extremely good at responding to feedback and worked incredibly hard."</h1>
<p style="text-align:center; color:#A6A6A6;"> Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. </p></div>
</div>
</div>- 2 Your html is invalid: w3/TR/html5/semantics.html#the-html-element – Andreas Commented Nov 4, 2014 at 10:53
-
Is this really the minimum amount of code required to replicate the problem. I don't want to be harsh but your HTML is: a) invalid, b) a mess and out of date, e.g attribute such a
colorandbgColorare depreciated. Please provide the minimum amount of code to replicate the problem. It is also hard to work with a broken image. Use something like placehold.it instead – Jon P Commented Nov 4, 2014 at 11:11 - I also believe you'd be better off using a background image on a container as that is exactly what it is. – Jon P Commented Nov 4, 2014 at 11:28
3 Answers
Reset to default 5You can set a font-size on your text with a value in viewport units.
Here's a demo (Resize the window to see text resizing)
<img src="http://lorempixel./g/400/200" alt="" />
<div class="text">Some text</div>
CSS
img {
width: 50%;
height: 50%;
}
.text {
font-size: 4vw; /* 4% of the viewport width */
}
Use media query and percentage for font-size
Fiddle(resize the window to take effect)
http://jsfiddle/vntjqnf8/2/
CSS
body{
font-family: 'Raleway', sans-serif;
font-size: 36px;
font-weight:400;
height:100%;
width:100%;
margin:0 auto;
}
.resize{
text-align:center;
color:#F39C9C;
font-size:100%;
width:100%;
}
@media screen and (max-width: 680px){
.resize{
font-size: 50%;
}
}
HTML
<h2 class="resize" >
"They were extremely good at responding to feedback and worked incredibly hard."
</h2>
You set #maincontent1 to position: relative; and set .overlay to position: absolute; Then you can position the overlay with top or bottom, right or left values.