You are currently viewing Best Way to Create Header Image in CSS | Beginners Guide
  • Post category:CSS

Best Way to Create Header Image in CSS | Beginners Guide

Create Image Header CSS

This article is about how to create image header in CSS. All the webpages or websites are having header images, but some rare webpages don’t have a header image.

What is the Header image?

The image that displays on the top of the webpage is called the header image. A website has a header image only on the homepage. We create to attract users and design. We can also do animation in the header image. And we can also use Headertext over the header image. To create a header image you can use HTML <img> tag or CSS background-image property both times will give the same result.

Header Image

<html>
<head>
<title> Header image</title>
</head>
<style type="text/css">
*{
margin: 0%;
}
.h{
background-image: url(./nature.jpg);
width:100%;
height: 400px;
background-repeat: no-repeat;
background-size: cover;
font-weight: bold;
align-items: center;
position: fixed;
}
h1{
position: absolute; }
</style>
</head>
<body>
<div class="h"></div>
<h1>Hello Everyone! Welcome To My Website</h1>
</html>

Output:

create image header css

The above code has one div and an h1 element in the body. In CSS, the div contains a background image on the top of the webpage. So, it is a header image. You can also create using an image tag.

Header Image in HTML

<!DOCTYPE html>
<html>
<head>
   <title>HTML Header image</title>
     <style type="text/css">
        *{
         margin: auto;
        }
     </style> 
</head>
<body>
<img width="100%" height="300px" src="nature.jpg">
</html>

Output:

create image header cssSee the above output the header image is wrapped,  so you cannot use the <image> tag for creating header image.

Leave a Reply