CODEWITHSUNDEEP
htmlcssbackground-imageblur
Kiril
Kiril

Reputation: 40345

How to blur background image of div, without blurring the remaining site or the content of the div

I'm trying to figure out how to blur the background image of a div. The goal is to only blur the background image of the div and not the background of the page itself or the div contents.

Here is an example div:

<header class="intro">
  <div class="background-image"></div>
  <div class="intro-body">
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <h1 class="brand-heading">Grayscale</h1>
          <p class="intro-text">A free, responsive, one page Bootstrap theme.
            <br>Created by Start Bootstrap.</p>
          <a href="#about" class="btn btn-circle page-scroll">
            <i class="fa fa-angle-double-down animated"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>

The CSS:

body {
  width: 100%;
  height: 100%;
  font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: white;
  background-color: black;
}

.intro {
  display: table;
  width: 100%;
  height: auto;
  padding: 100px 0;
  text-align: center;
  color: white;
}

.intro .background-image {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  background-image: url(https://previews.123rf.com/images/denisovd/denisovd1203/denisovd120301652/12705959-wall-of-wooden-barrels-Stock-Photo-barrels-whiskey-cellar.jpg) no-repeat bottom center scroll;
  background-color: black;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

.intro .intro-body {
  z-index: 9999;
  display: table-cell;
  vertical-align: middle;
}

Here is the JS fiddle containing the CSS I've tried: http://jsfiddle.net/80jzdvqp/

I would high appreciate some help!

Upvotes: 2

Views: 9279

Answers (2)

frnt
frnt

Reputation: 8795

I have created a example using div, this includes a parent div,image and text. Now if I don't apply any position to elements present inside then they will align one after another, but to make image as background of div I have set it's position as absolute and using filter you can apply blur to the image and then using z-index align them i.e text and image. Hope this helps.

The filter property provides graphical effects like blurring, sharpening, or color shifting an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

div{
  width:200px;
  height:200px;
  overflow:hidden;
  position:relative;
}
div > img{
  width:auto;
  height:100%;
  z-index:1;
  top:0;
  left:0;
  position:absolute;
  filter:blur(10px);
}
div > p{
  text-align:center;
  top:60px;
  z-index:9;
  position:relative;
}
<div>
<p>Demo text.Demo text.Demo text.Demo text.Demo text.</p>
<img src="https://previews.123rf.com/images/denisovd/denisovd1203/denisovd120301652/12705959-wall-of-wooden-barrels-Stock-Photo-barrels-whiskey-cellar.jpg">
</div>

Upvotes: 1

Burhan Kashour
Burhan Kashour

Reputation: 677

Here is the solution

<body><header class="intro">
  <div class="background-image"></div>
  <div class="intro-body">
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <h1 class="brand-heading">Grayscale</h1>
          <p class="intro-text">A free, responsive, one page Bootstrap theme.
            <br>Created by Start Bootstrap.</p>
          <a href="#about" class="btn btn-circle page-scroll">
            <i class="fa fa-angle-double-down animated"></i>
          </a>
        </div>
      </div>
    </div>
  </div>
</header>
</body>

Css :

body {
    width: 100%;
    height: 100%;
    font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: white;
    background-color: black;
    margin: 0;
    padding: 0;
}

.intro {
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: white;
}

.intro .background-image {
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(https://wallpaperbrowse.com/media/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg);
    -webkit-filter: blur(10px);
    filter: blur(10px);
}

.intro .intro-body {
  z-index: 9999;
  display: table-cell;
  vertical-align: middle;
}

Upvotes: 1

Related Questions