Easy way to Learn Web Design

Responsive Full width image in browser with elements top , center and bottom.

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.

View Demo

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.
result

Where you can use this CSS

1. To Show full width image in all type of browser and in all resolutions.
2. You have created a responsive layout and want to display logo always in top center without adding extra css code for small devices.
3. This code allows to display arrow at bottom center of the screen in all resolution. You can give bounce animation to this arrow which indicates to press this arrow button to move downward.

Leave A Reply

Your email address will not be published.