Skip to main content

Blurred Image Background | Rustcode

by Rustcode
Blurred-Image-Background-html-and-css

"Blurred image background" is a common effect in the background sometimes used in websites but can be used in more ways. In the website background, we can use the parallax effect.

In this effect, we are using an image in the background. CSS "filter" is using to create this effect.

You can learn more about website development effects if you follow our other article.



01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Blurred Image Background | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<body>

  <div class="bg-image"></div>
  <div class="bg-text">
    <h2>RUSTCODE</h2>
    <h1 style="font-size: 42px">Blurred Background</h1>
    <p>USING HTML AND CSS</p>
  </div>

</body>



03. CSS

You can download background image form here. 

body , html{
  margin: 0px;
  font-family: Arial , Helvetica , sans-serif;
  height: 100%;
}
.bg-image{
  height: 100%;
  background-image: url("bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(4px);
}
.bg-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 2;
  width: 40%;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 20px;
  border-radius: 6px;
  text-align: left;
  font-weight: bold;
  box-shadow: 2px 2px 24px #000;
}
h1 , h2 , p{
  letter-spacing: 2px;
}


04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.





RELATED POST:

Comments

Post a Comment