Category:Web Design Blocks

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.

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.

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.

 

step-4- Hero Image Example

Watch hero image Demo example here.

Leave a Reply

Sign up Newsletter