CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ben Wilkinson
Ben Wilkinson

Reputation: 29

How can I place text on a resizing image that also resizes?

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.com/css?family=Comfortaa' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/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.com/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>

Upvotes: 2

Views: 4306

Answers (3)

Manjunath Siddappa
Manjunath Siddappa

Reputation: 2157

Use media query and percentage for font-size

Fiddle(resize the window to take effect)

http://jsfiddle.net/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>

Upvotes: 1

KnutSv
KnutSv

Reputation: 748

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.

Upvotes: 0

Danield
Danield

Reputation: 125463

You 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.com/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 */
}

Upvotes: 5

Related Questions