How To Add Images On Background Using HTML & CSS

How To Add Images On BACKGROUND USING HTML AND CSS
154 Views

HOW TO ADD IMAGES ON BACKGROUND USING HTML & CSS

Hi guys, how is everything? This article is not so long. But it is important for you. Many times we have seen that we need to add images on our web pages.

Specially many of us want to add background images on our website. In this article i am going to show you how you can add a background image using html and css.

Let’s start.

Apply HTML Code

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

</body>
</html>

Now we are all set. I am going to add an image.

Apply CSS Code

body{
        background-image: url(images/desktop-2325627_960_720.jpg);
	background-repeat: no-repeat;
	background-size: cover;
        background-attachment: fixed;
        
}

Let’s check how our web page looks like.

Now, come to the point. We need to add our website elements. What about navigation bar or header?

Do you like to add some texts or some sections now?

What if we add some sections without adding overlay on our background image?

Let’s check. I am writing some HTML codes for header and navigation bar. Check below-

        <section>
		<center>
			<h2>
				This Is A Demo Site
			</h2>
		</center>
	</section>
	<nav>
		<a href="#">Home</a>
		<a href="#">Blog</a>
		<a href="#">Portfolio</a>
		<a href="#">About Us</a>
		<a href="#">Contact us</a>
	</nav>

Apply css code for this. Check below-

               h2{
			letter-spacing: 15px;
			padding-top: 15px;
			padding-bottom: 25px;
			background-color: #dddddda0;
			border-bottom: 1px solid pink;
		}
		nav, nav>a{
			padding: 15px;
			text-decoration: none;
			color: black;
			text-align: center;
		}
		nav>a:hover{
			background-color: #000;
			transition: 0.5s;
			color: #fff;
		}

See this?

Let’s see our output now-

Now that’s nice. Looking good.

Try yourself. Have a good day.

Related posts for you

Share Your Opinion With Me