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:
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:
See the above output the header image is wrapped, so you cannot use the <image> tag for creating header image.
