0

I want to put blur filter on the background image in this Bootstrap template but that results in the child divs also getting blurred. I followed this solution, and it works on desktop, but it does not work on mobile. The text is shifted to the top and is cut off by the navigation bar and the bottom of the header is cut off, all because of top/bottom/left/right positioning I'm adding. Here's what I have:

The HTML:

<header class="masthead text-center text-white d-flex">
  <div class='masthead-img'></div>

  <div class="container my-auto" style='z-index: 100;'>
  <!-- everything else is the same as what's in the template -->
...

This is based off this code

The CSS:

/* comment out header.masthead */

.masthead-img {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 56px);
  background-image: url("../img/header.jpg");
  background-position: center center;
  background-size: cover;
  z-index: 10;
  filter: blur(1px);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
}

This is based off this code

<header class="masthead text-center text-white d-flex">
  <div class='masthead-img'></div> <!-- my addition -->
  ...
</header>
user2233706
  • 6,148
  • 5
  • 44
  • 86
  • you need to consider position:absolute for your element – Temani Afif Nov 17 '18 at 15:01
  • That 'duplicate' question does not help me. It does not work when you are also using Bootstrap. I placed position:absolute; in my new div, and that does not help. – user2233706 Nov 17 '18 at 15:11
  • there is not only position:absolute .. you need also position:relative on parent and top/left/right/bottom values ,etc .... if it's still not working edit your question to show that and I will reopen the quesiton if the duplicate isn't helpful – Temani Afif Nov 17 '18 at 15:13
  • That solution does not work on mobile. Can you please remove the duplicate tag? – user2233706 Nov 18 '18 at 04:56
  • please share your full code within the question . *it's not working* isn't a question, we need to see the issue and don't link to external ressource, no one will open them. Use the snippet tool to create an MVCE (https://stackoverflow.com/help/mcve) ... I can reopen but it will be closed again, so edit to include everything to make it a good question then I will re-open it – Temani Afif Nov 18 '18 at 09:07

0 Answers0