How To Add Background Images Overlay?

How To Add Background Images Overlay?
139 Views

Nowadays people love to add background image on their websites. It is simple. Within 1/2 minutes you can add your own background images if you know the process.

But the interesting thing is you can add overlay on your image. By this tip you can add overlay on anything. Let’s see.

Apply HTML Code

       <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

First Step: Apply css code for H2

h2{
			letter-spacing: 15px;
			top: 0;
			left: 0;
			padding-top: 15px;
			padding-bottom: 25px;
			background-color: #dddddda0;
			border-bottom: 1px solid pink;
		}

Second Step: Apply Css code for navigation bar.

             nav, nav>a{
			padding: 15px;
			text-decoration: none;
			color: #fff;
			text-align: center;
		}
		nav>a:hover{
			background-color: #000;
			transition: 0.5s;
			color: #fff;
		}

Let’s see how it is looking. 🙂

OMG. Is it?

Let’s add background image and overlay effect.

Apply some css codes now for body tag.

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

Time to see our output.

See?

We have added overlay effect on background image and added navigation bar. Isn;y it good?

Try yourself. Have a good day.

Related posts for you

Share Your Opinion With Me