CODEWITHSUNDEEP
htmlcss
Scooby
Scooby

Reputation: 1

I want a background pic to be blurry

I'm trying to make a background pic blurry but when I try this everything on the page gets blurry.

<!DOCTYPE html>
<html>
<head>
    <title>Website</title>
    <link rel="stylesheet" type="text/css" href="style2.css">

</head>
<body>
    <div class="profil-box">
    <img src="bilder/Anders.jpg" class="profil-bilde">
        <h1> Anders Magnus Klingsholm </h1>
            <h5> CV </h5>
    </div>  
</body>
</html>

html { 
  background: url(bilder/copenhagen1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.profil-box {
    width: 400px;
    height: 400px;
    background: rgba(0,0,0,0.4);
    padding: 40px;
    color: white;
    margin: 0 auto;
    margin-top: 140px;
    text-align: center;
    font-family: "Helvetica Neue", sans-serif;
}
.profil-bilde   {
    border-radius: 50%;
    height: 200px;
    width: 200px;
}

Upvotes: 0

Views: 78

Answers (3)

LordNeo
LordNeo

Reputation: 1182

The main problem of using css filter to blur out the image is that it will affect all the child nodes. So instead of blurring out the real background. Put another image and position it as background using z-index and absolute position.

z-index: -1;
position: absolute;

Also remember to set the other background as transparent in order to see the other image behind it.

.background-blurred {
  -webkit-filter: blur(4px);
  filter: blur(4px);
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: -1;
}

p {
  color: white;
  font-size: 24px;
  padding: 15px;
}
  
<div>
<div class="content">
  <p> Content of the website</p>
</div>
<img class="background-blurred" src="https://source.unsplash.com/random/800x800" />
</div>

Upvotes: 1

AymDev
AymDev

Reputation: 7609

Well, according to the given informations... If you want to set a background image with a blurry effect, the best way is to put an already blurried image.
But...
There is a CSS property wich let you apply filter.
You can see that it isn't really supported everywhere here.

Example to set a fixed background to a whole page:

#my_bg_block {
    width: 100%;
    height: 100vh;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: url(path/to/my/image) center center no-repeat;
    background-size: cover;
    filter: blur(15px);
}

Upvotes: 0

MarioZ
MarioZ

Reputation: 997

You can use css filter for that:

img {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

As you cannot use in body you can create a div to fill the background:

#back {
		background: url(http://placekitten.com/g/800/600) no-repeat center center fixed; 
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		filter: blur(4px);
	}
<div id="back"></div>

Upvotes: 5

Related Questions