Have you ever seen the html page where image is coming in full width in browser with logo on top and text in center but don’t know how to do this. lets start creating Responsive Full width image in browser with elements top , center and bottom.
In this simple HTML/ CSS Tutorial, you will learn
1. How you can give full width image in browser.
2. Alignment of elements on top , center and bottom.
Resources
Click here to Download the resources I have used to create this HTML page.
HTML & CSS of the tutorial
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> Full width image </TITLE>
<link href='https://fonts.googleapis.com/css?family=Raleway:300' rel='stylesheet' type='text/css'>
<style>
body{margin:0;padding:0;}
.main_image{background:url(themeimage.jpg) no-repeat center center;background-size:cover;height:100vh;position:relative;text-align:center;}
.downarrow{position:absolute;bottom:0;left:0;right:0;margin:0 auto;display:block;width:30%}
.downarrow img{max-width:100%;}
.logo{position:absolute;top:10px;left:0;right:0;margin:0 auto; display:block;width:30%;}
.logo img{max-width:100%;}
.center_text{display:table;vertical-align:middle;height:100%;width:100%;font-family: 'Raleway', sans-serif;color:#ffffff;}
.center_text p{display:table-cell;vertical-align:middle;text-align:center;}
</style>
</HEAD>
<BODY>
<div class="main_image">
<a href="#" class="logo"><img src="logo.png"></a>
<div class="center_text"><p>Text Horizontal/ Vertical center in all<br>full width browser</p></div>
<a href="#" class="downarrow"><img src="down-arrow.png"></a>
<div>
</BODY>
</HTML>
Preview in Browser
see the the result in browser. It will show Logo on top, text in center and arrow at bottom of screen in all resolution.
The post Responsive Full width image in browser with elements top , center and bottom. appeared first on Tutorial Web Design.
