hero-image-demo

Build Beautiful responsive hero images Web Designs for Website

Use of responsive hero images is now very popular in web design’s world. It makes web page very engaging, attractive and give beautiful look. Creating hero images yourself is not so difficult. You can create your own hero image very easily. Here in this article i shall show you the steps and code to prepare responsive hero image for your website easily. Below given image is our example of hero image which we are going to build here.

hero-image-demo

step-1 Basic HTML Structure

create a file hero.html. and write common html struture in the file. The hero image has five 5 basic common parts.

  1. background image
  2. overlay css gradient to blur background
  3. headline
  4. description line
  5. Button with link

In view of above hero design parts. We will create the following html structure below here.

<html>
    <head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
   </head>
<body>
     <div class="ulook-hero-image">
         <div class="ulook-hero-text">
           <h1 class="ulook-hero">Hire Service for Recovery</h1>
           <p>We are ready to serve 24/7</p>
            <button>View Detail</button>
         </div>
     </div>

</body>
</html>

step-2 Start Styling for Hero Image Design

hero images are shown according to body height. so first step is to create body and html tags 100 % height relative to all view ports. for that following line will be added in the css file.

body, html {
    height: 100%;
    margin: 0;
  
    }

step-3- Style Code for Hero Image

Now it is time create the style for our hero image web design. For simplicity the css style is created on the same html page with in the style tag. but you can copy style separately in any css file and link that file to this html.

We aim to make responsive hero image. So we also add media queries in the last portion of our styles as our image could be shown on mobile devices and phones responsively.The complete code will be look like this.

<html>
    <head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body, html {
    height: 100%;
    margin: 0;
  
    }

.ulook-hero-image {
      background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("img/image1.jpg");
      height: 50%;
	  display:block;
      /*set image for all screens */
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
      }

.ulook-hero-text {
      text-align: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white;
	  font-family: Arial, Helvetica, sans-serif;
      }
.ulook-hero-text button {
      border: none;
      outline: 0;
      display: inline-block;
      padding: 10px 25px;
      color: black;
      background-color: #ddd;
      text-align: center;
      cursor: pointer;
      font-size:1.5em;
}

.ulook-hero-text button:hover {
      background-color: #555;
      color: white;
      }
h1.ulook-hero {
      font-size:2.5em;
	  font-family: Arial, Helvetica, sans-serif;
      }
.ulook-hero-image p {
      font-size:1.5em;
      }  
	 
/*make hero-image responsive for all screens */	 

   @media screen and (max-width: 768px) { 
.ulook-hero-image {
      height:100%;
      }
   }
   
   @media screen and (max-width: 450px) { 
h1.ulook-hero {
      font-size:1.4em;
      }

.ulook-hero-text button {
      padding:5px 10px;
      font-size:0.5em;
      }
.ulook-hero-image p {
      font-size:0.8em;
      }  
    }
	
	</style>
     
    </head>
<body>
     <div class="ulook-hero-image">
         <div class="ulook-hero-text">
           <h1 class="ulook-hero">Hire Service for Recovery</h1>
           <p>We are ready to serve 24/7</p>
            <button>View Detail</button>
         </div>
     </div>

</body>
</html>

 

step-4- Hero Image Example

Watch hero image Demo example here.

Spread the love

 

Leave a Reply

Your email address will not be published. Required fields are marked *

17 − 2 =

Go to Top