how to add blurred images with text in html?

Question

I am a newbie to HTML AND CSS , and i am making a little car website, and i want the images to be blurred , and the text to be displayed above .

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* The image used */
  background-image: url("https://th.bing.com/th/id/R.4418ff70835bb7e45f3b5d83c7ff5f5e?rik=bD4DENSEINH8%2bA&riu=http%3a%2f%2fwallup.net%2fwp-content%2fuploads%2f2017%2f03%2f28%2f439234-sports_car-vehicle-Lamborghini-Italian_Supercars.jpg&ehk=kG5ZwFnums33xnh3qxViA8B4WZ73wbUAjrictsOSXbU%3d&risl=&pid=ImgRaw&r=0");
  
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-image1 {
  /* The image used */
  background-image: url("https://th.bing.com/th/id/OIP.WZziNQ9wRCIosw1FGPkJsAHaEK?pid=ImgDet&rs=1");
  
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

.bg-text1 {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<div class="bg-image"></div>

<div class="bg-text">
  <h2>Blurred Background</h2>
  <h1>My car website</h1>
  <p>This is a blurred lamborghini</p>
</div>
<hr>
<div class="bg-image1"></div>
<div class="bg-text1">
  <h2>Blurred Background</h2>
  <h1>My car website</h1>
  <p>This is a blurred lamborghini</p>
</div>

</body>
</html>

The code is like this, i found it in a site called w3schools.com

So, the images are coming in two, its ok, but the text block is not. its coming only in the first image, not in the second one . how can i fix this ? can anyone share some code ?

can you just explain you aim I am not able to get your point can you try me explain me in detail if possible.. — Yash Chitroda, Aug 27 '21 at 04:17
When you run the program , you get 2 images that are blurred . in the first image, there is text,. but in the second image there is no text. if you see the program, you can see that i have tried to add to text box to the second image also, but its not coming . — alex, Aug 27 '21 at 04:22
I am sorry, but can you share some code ? i am new to this kind of things. — alex, Aug 27 '21 at 04:23

score 2 · Accepted Answer · answered Aug 27 '21 at 04:22

Try Considering This One:

Probably Might Help You.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* The image used */
  background-image: url("https://th.bing.com/th/id/R.4418ff70835bb7e45f3b5d83c7ff5f5e?rik=bD4DENSEINH8%2bA&riu=http%3a%2f%2fwallup.net%2fwp-content%2fuploads%2f2017%2f03%2f28%2f439234-sports_car-vehicle-Lamborghini-Italian_Supercars.jpg&ehk=kG5ZwFnums33xnh3qxViA8B4WZ73wbUAjrictsOSXbU%3d&risl=&pid=ImgRaw&r=0");
  
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-image1 {
  /* The image used */
  background-image: url("https://th.bing.com/th/id/OIP.WZziNQ9wRCIosw1FGPkJsAHaEK?pid=ImgDet&rs=1");
  
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

.bg-text1 {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 150%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<div class="bg-image"></div>

<div class="bg-text">
  <h2>Blurred Background</h2>
  <h1>My car website</h1>
  <p>This is a blurred lamborghini</p>
</div>

<div class="bg-image1"></div>
<div class="bg-text1">
  <h2>Blurred Background</h2>
  <h1>My car website</h1>
  <p>This is a blurred ferrari </p>
</div>

</body>
</html>

thanks @alex you just need to add top:160% in bg-text1 in order to achieve your output — Yash Chitroda, Aug 27 '21 at 04:29

score 2 · Answer 2 · answered Aug 27 '21 at 05:55

How about trying a different approach.

Here there are 2 divs. 1 is the background image and the 2nd is the content. The .background-image div itself is blurred along with the background image. The z-index of .background-image is lower than the .content so that it appears below the .content

I have used flexbox to center the text both vertically and horizontally on the page. You can adjust the width of the p, .background-image and .content according to your needs.

Hope you understood!

Note: I have made this according to the whole size of the page. You can adjust the width and height accordingly

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <style>
            .background-image {
                position: fixed;
                left: 0;
                right: 0;
                z-index: 1;

                display: block;

                background-image: url('https://robbreport.com/wp-content/uploads/2020/07/6-3.jpg?w=1000');
                
                width: 100vw;
                height: 100vh;

                -webkit-filter: blur(18px);
                -moz-filter: blur(18px);
                -o-filter: blur(18px);
                -ms-filter: blur(18px);
                filter: blur(18px);

                background-size: cover;
                background-repeat: no-repeat;
              }
            
              .content {
                position: fixed;
                left: 0;
                right: 0;

                height: 100vh;

                z-index: 9999;

                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
              }

              p{
                width: 70%;
              }
        </style>
          <div class="background-image"></div>
          <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam erat in ante malesuada, facilisis semper nulla semper. Phasellus sapien neque, faucibus in malesuada quis, lacinia et libero. Sed sed turpis tellus. Etiam ac aliquam tortor, eleifend
              rhoncus metus. Ut turpis massa, sollicitudin sit amet molestie a, posuere sit amet nisl. Mauris tincidunt cursus posuere. Nam commodo libero quis lacus sodales, nec feugiat ante posuere. Donec pulvinar auctor commodo. Donec egestas diam ut mi adipiscing,
              quis lacinia mauris condimentum. Quisque quis odio venenatis, venenatis nisi a, vehicula ipsum. Etiam at nisl eu felis vulputate porta.</p>
          </div>
    </body>
    </html>

Thanks a bunch for this detailed answer! – alex Aug 27 '21 at 06:05 — alex, Aug 27 '21 at 06:05

score 1 · Answer 3 · answered Aug 27 '21 at 04:27

Both bg-text and bg-text1 are positioned absolutely at exactly the same coordinates, so they're on top of each other. You need to add a container and position it relatively so the absolute position would be relative to the container, like so:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* The image used */
  background-image: url("https://th.bing.com/th/id/R.4418ff70835bb7e45f3b5d83c7ff5f5e?rik=bD4DENSEINH8%2bA&riu=http%3a%2f%2fwallup.net%2fwp-content%2fuploads%2f2017%2f03%2f28%2f439234-sports_car-vehicle-Lamborghini-Italian_Supercars.jpg&ehk=kG5ZwFnums33xnh3qxViA8B4WZ73wbUAjrictsOSXbU%3d&risl=&pid=ImgRaw&r=0");
  
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-image1 {
  /* The image used */
  background-image: url("https://th.bing.com/th/id/OIP.WZziNQ9wRCIosw1FGPkJsAHaEK?pid=ImgDet&rs=1");
  
  /* Add the blur effect */
  filter: blur(8px);
  -webkit-filter: blur(8px);
  
  /* Full height */
  height: 100%; 
  
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Position text in the middle of the page/image */
.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}

.bg-text1 {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  border: 3px solid #f1f1f1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  padding: 20px;
  text-align: center;
}
.bg-image-container {
    position: relative;
    height: 100vh; // Set the height to cover the viewport
}
</style>
</head>
<body>
<div class="bg-image-container">
  <div class="bg-image"></div>

  <div class="bg-text">
    <h2>Blurred Background</h2>
    <h1>My car website</h1>
    <p>This is a blurred lamborghini</p>
  </div>
</div>
<hr>
<div class="bg-image-container">
  <div class="bg-image1"></div>
  <div class="bg-text1">
    <h2>Blurred Background</h2>
    <h1>My car website</h1>
    <p>This is a blurred lamborghini</p>
  </div>
</div>

</body>
</html>

how to add blurred images with text in html?

3 Answers3

Try Considering This One: