Hero Image CSS: How To Create Hero Image Using HTML And CSS

Creating An Attractive Hero Image Using HTML And CSS.

We are going to make a hero image for our website using html and css. Hero image css use on our website just below the navigation bar there are many designs but in this article, we have made a simple and attractive hero image banner for our website.

<!DOCTYPE html>
        <html>
        <head>
        	<title>Hero Image CSS: How to create hero image using html and css</title>
        	<meta charset="utf-8">
        	<meta name="viewport" content="width=device-width, initial-scale=1.0">
        	<link type="text/css" rel="stylesheet" href="style.css">
        	
        	
        	<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
        	<link href="https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap" rel="stylesheet">
        
        </head>
        <body>
        	
        	<div id="banner">
        		
        		<div class="banner-container">
        			<span class="creative-text">Creative Template</span>
        			<h2>
        				Welcome <br>to MoGo
        			</h2>
        			<hr>
        			<a href="#">Learn more</a>
        		</div>
        	</div>
        </body>
        </html>

*{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        /*Banner*/
        #banner {
          font-family: 'Montserrat', sans-serif;
          background-image: linear-gradient(rgba(62, 36, 23, 0.3), rgba(0, 36, 23, 0.6)), url(https://1.bp.blogspot.com/-T4rncsWIQ0A/YBDe8RsFmbI/AAAAAAAAGp4/3UztG_IVbhQyxW1TEnQw0pn15h76KJoUQCLcBGAsYHQ/s1920/bgHeader.jpg);
          background-size: cover;
          background-repeat: no-repeat;
          background-position:center center;
          height: 500px;
          width: 100%;
          position: relative;
        }
        /*Banner text*/
        #banner .banner-container{
          position: absolute;
          top: 0%;
          left: 49%;
          transform: translate(-50%, 20%);
          text-align: center;
        }
        #banner .banner-container .creative-text{
          font-family: 'Kaushan Script', cursive;
          font-size: 45px;
          color: #fff;
          margin-bottom: 10px;
        }
        #banner .banner-container h2 {
          font-size: 80px;
          color: #fff;
          }
        /*Small short line*/
        #banner .banner-container hr {
          width: 60px;
          height: 2px;
          background-color: #fff;
          margin: 20px auto;
        }
        /*Banner Button*/
        #banner .banner-container a {
          display: inline-block;
          color: #fff;
          font-size: 12px;
          text-decoration: none;
          text-transform: uppercase;
          border: 2px solid #fff;
          padding: 10px 20px;
          }
        
          /*Tablet Screen At 768px*/
        @media only screen and (max-width: 768px) {
            /*Banner*/
            #banner {
                  height: 380px;
            }
            /*Banner Text*/
            #banner .banner-container{
                  transform: translate(-50%, 10%);
            }
            #banner .banner-container .creative-text{
                font-size: 40px;
            }
            #banner .banner-container h2 {
                font-size: 70px;
              }
              /*Small short line*/
            #banner .banner-container hr {
                 width: 55px;
            }
            /*Banner Button*/
            #banner .banner-container .banner-container a {
                padding: 8px 18px;
                font-size: 10px;
          } 
        }
        
        /*Mobile Large Screen At 425*/
        @media only screen and (max-width: 425px) {
            /*Banner*/
            #banner {
                  height: 350px;
            }
            #banner .banner-container .creative-text{
                font-size: 30px;
            }
            #banner .banner-container h2 {
                font-size: 55px;
              }
              /*Small short line*/
            #banner .banner-container hr {
                 width: 53px;
            }
            /*Banner Button*/
            #banner .banner-container a {
                padding: 7px 17px;
                font-size: 9px;
          } 
        }
        /*Mobile medium Screen At 375*/
        @media only screen and (max-width: 375px) {
            /*Banner*/
            #banner {
                  height: 320px;
            }
            #banner .banner-container .creative-text{
                font-size: 28px;
            }
            #banner .banner-container h2 {
                font-size: 50px;
              }
            /*Banner Button*/
            #banner .banner-container a {
                padding: 8px 18px;
                font-size: 10px;
          } 
        }
        /*Mobile small Screen At 320*/
        @media only screen and (max-width: 320px) {
            #banner .banner-container .creative-text{
                font-size: 24px;
            }
            #banner .banner-container h2 {
                font-size: 45px;
            }
        }

View Demo

Language

HTML, CSS

Responsive

Yes

Capable For Blogger

Let’s start making a hero image
Creating an html structure for a hero image

HTML CODE
Create a file named index.html and add html markup and save the file.

Html markup

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>

</body>
</html>

After adding html markup now move in the head tag.

Head Tag
In the head tag, we have added only one link. That is Font Family links
We have added a custom font
i) Montserrat ii) Kaushan Script
If you want to give the same font family as I have given in my hero image the use these two font families.

All font family-integrated you get when you download our free code source.

Head Tag Code (Copy and past in your project)

<head>
<title>Hero Image CSS: How to create hero image using html and css</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="style.css">


<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script&display=swap" rel="stylesheet">

</head>

Body Tag Code (Copy and past in your project)

<body>

<div id="banner">

<div class="banner-container">
<span class="creative-text">Creative Template</span>
<h2>
Welcome <br>to MoGo
</h2>
<hr>
<a href="#">Learn more</a>
</div>
</div>
</body>

After adding html code save the file and open the file in your browser you will see html output structure.

HTML OUTPUT

After making an html structure now we need to style to our html.

Related Article: How To Create A Animated Input Field-Effect CSS

Create and a new file named style.css and code and past css code in your project. We have added responsive code to it.

CSS Code

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

/*Banner*/

#banner {

font-family: 'Montserrat', sans-serif;

background-image: linear-gradient(rgba(62, 36, 23, 0.3), rgba(0, 36, 23, 0.6)), url(bgHeader.jpg);

background-size: cover;

background-repeat: no-repeat;

background-position:center center;

height: 500px;

width: 100%;

position: relative;

}

/*Banner text*/

#banner .banner-container{

position: absolute;

top: 0%;

left: 49%;

transform: translate(-50%, 20%);

text-align: center;

}

#banner .banner-container .creative-text{

font-family: 'Kaushan Script', cursive;

font-size: 45px;

color: #fff;

margin-bottom: 10px;

}

#banner .banner-container h2 {

font-size: 80px;

color: #fff;

}

/*Small short line*/

#banner .banner-container hr {

width: 60px;

height: 2px;

background-color: #fff;

margin: 20px auto;

}

/*Banner Button*/

#banner .banner-container a {

display: inline-block;

color: #fff;

font-size: 12px;

text-decoration: none;

text-transform: uppercase;

border: 2px solid #fff;

padding: 10px 20px;

}

/*Tablet Screen At 768px*/

@media only screen and (max-width: 768px) {

/*Banner*/

#banner {

height: 380px;

}

/*Banner Text*/

#banner .banner-container{

transform: translate(-50%, 10%);

}

#banner .banner-container .creative-text{

font-size: 40px;

}

#banner .banner-container h2 {

font-size: 70px;

}

/*Small short line*/

#banner .banner-container hr {

width: 55px;

}

/*Banner Button*/

#banner .banner-container .banner-container a {

padding: 8px 18px;

font-size: 10px;

}

}

/*Mobile Large Screen At 425*/

@media only screen and (max-width: 425px) {

/*Banner*/

#banner {

height: 350px;

}

#banner .banner-container .creative-text{

font-size: 30px;

}

#banner .banner-container h2 {

font-size: 55px;

}

/*Small short line*/

#banner .banner-container hr {

width: 53px;

}

/*Banner Button*/

#banner .banner-container a {

padding: 7px 17px;

font-size: 9px;

}

}

/*Mobile medium Screen At 375*/

@media only screen and (max-width: 375px) {

/*Banner*/

#banner {

height: 320px;

}

#banner .banner-container .creative-text{

font-size: 28px;

}

#banner .banner-container h2 {

font-size: 50px;

}

/*Banner Button*/

#banner .banner-container a {

padding: 8px 18px;

font-size: 10px;

}

}

/*Mobile small Screen At 320*/

@media only screen and (max-width: 320px) {

#banner .banner-container .creative-text{

font-size: 24px;

}

#banner .banner-container h2 {

font-size: 45px;

}

}

CSS OUTPUT

We have successfully created a hero image using html and css

If you have any query comment down below.
Download the hero image css code source by clicking the download now button.

Download Now

Thanks, Happy Learning :-)
Keep Visiting

Hero Image CSS: How To Create Hero Image Using HTML And CSS

Creating An Attractive Hero Image Using HTML And CSS.

Leave A Relpy

Labels