div background image blur

Tony George answered on June 5, 2022 Popularity 9/10 Helpfulness 4/10

answer div background image blur

related how to blur background image in css

related background image blur css

related blur background image css

div background image blur

Comment

div {
  border:solid ;
  padding:6vw ;
  position:relative;
}
div:before{
  content:'';
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:url(http://lorempixel.com/1600/800/nature/1) fixed center;
  filter:blur(4px);
  background-size:100vw auto;
  /* makup ? */
  box-shadow:inset 0 0 0 50vw rgba(255,255,255,0.2)
}
/* makup to center content */
html {
  min-height:100%;
  display:flex;
  background:url(http://lorempixel.com/1600/800/nature/1) fixed center;
  background-size:100vw auto
}
body {
  margin:auto;
}

Popularity 9/10 Helpfulness 4/10 Language whatever

Source: stackoverflow.com

Tags: background-image blur whatever

Link to this answer
Share Copy Link

Contributed on Dec 16 2022

Tony George

0 Answers Avg Quality 2/10

Closely Related Answers

how to blur background image in css

Comment

/* Setting background image and filter to blur */
body{
      background-image: url("software_code_3.jpg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
      color: whitesmoke;
      backdrop-filter: blur(8px);
/*       -webkit-filter: blur(8px); */
    }
/* creating a kind of "glass-polymorphism" effect with a light-dark background*/
.container {
      border: 1px;
      border-radius: 5px;
      background-color: rgb(0,0,0);
      background-color: rgba(0,0,0, 0.4);
      padding: 20px;
    }

Popularity 10/10 Helpfulness 9/10 Language css

Source: Grepper

Tags: background b

Link to this answer
Share Copy Link

Contributed on Jun 05 2022

Obinna_E.

0 Answers Avg Quality 2/10

background image blur css

Comment

.blur-image {
  background-image: url("path/to/image.jpg");
  background-size: cover;
  filter: blur(5px);
  -webkit-filter: blur(5px); /* Safari support */
}

Popularity 10/10 Helpfulness 7/10 Language css

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 11 2023

YOU.com

0 Answers Avg Quality 2/10

blur background image css

Comment

html, body {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  
  display: grid;
  grid-template-columns: 1fr 6fr 1fr;
  grid-template-rows: 1fr 6fr 1fr;
  grid-template-areas: 
  '. . .'
  '. content .'
  '. . .'; 
  justify-content: center;
  align-items: center;
}

.backbround {
  width: 100%;
  height: 100%;
  
  grid-area: 1/1/5/5;
  
  background-image: url(https://i.imgur.com/aUhpEz3.jpg);
  filter: blur(5px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.content {
  height: 200px;
  position: relative;
  
  grid-area: content;
  display: flex;
  
  justify-content: center;
  align-items: center;
  color: white;
}

Popularity 10/10 Helpfulness 4/10 Language css

Source: stackoverflow.com

Tags: background-image back

Link to this answer
Share Copy Link

Contributed on Jul 14 2022

Philip Kumah Jr.

0 Answers Avg Quality 2/10

div background image blur

Contents

More Related Answers

div background image blur

Closely Related Answers

how to blur background image in css

background image blur css

blur background image css

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.