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

hero image 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.

View Demo

Language

HTML, CSS

Responsive

Yes

Capable For Blogger

No


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">

<!--Custom Font Family-->
<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>
<!--Banner-->
<div id="banner">
<!--Banner text-->
<div class="banner-container">
<span class="creative-text">Creative Template</span>
<h2>
Welcome <br>to MoGo
</h2>
<hr><!--Small short line-->
<a href="#">Learn more</a><!--Banner Button-->
</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
HTML OUTPUT

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


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

15+ Ways To Earn Money As A Programmer

Downlaod Ebook

Joint our VIP Facebook Group

Joint Now

Leave A Relpy

Labels