The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Add A Filter To A Background Image With CSS

TODO: Pull subtitle into page object
backdrop-filter Example
    Pile the coal high 
    Pitch the straw
    Greet the new guests
  
background-filter Example
    Fasten two pins
    Fly by night
    Glue the sheet
  

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Add A Filter To A Background Image With CSS

Two approaches: 


-- section/
-- class: exampleWrapper flow
-- title: backdrop-filter Example

-- html
-- show 

<div id="alfaWrap">
  <pre id="alfaText">
    Pile the coal high 
    Pitch the straw
    Greet the new guests
  </pre>
</div>

-- css
-- show
-- title: CSS

#alfaWrap {
  background-image: url("/images/assets/texture-1.jpg");
}

#alfaText {
  backdrop-filter: sepia(30%);
  -webkit-backdrop-filter: sepia(30%);
}


-- /section



-- section/
-- title: background-filter Example
-- class: exampleWrapper flow

-- html
-- show: below
-- title: HTML

<div id="bravoWrap">
  <pre id="bravoText">
    Fasten two pins
    Fly by night
    Glue the sheet
  </pre>
</div>

-- css
-- show
-- title: CSS

#bravoWrap{
  position: relative;
}

#bravoWrap::before {
  content: "";
  background-image: url("/images/assets/texture-1.jpg");
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  filter: sepia(100%);
}

#bravoText {
  position: relative;
}

-- /section

-- css 

#alfaText {
  color: black;
}

#bravoText {
  color: black;
}

.exampleWrapper {
  border: var(--main-border-accent-base);
  border-radius: var(--main-border-radius-base);
  padding: 0.8rem;
}

-- ref
-- title: MDN: backdrop-filter
-- url: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

-- ref
-- title: MDN: filter
-- url: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

-- ref
-- title: MDN: background-image
-- url: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image


-- categories
-- CSS 

-- metadata
-- date: 2023-08-20 15:37:42
-- id: 2ugk1xip
-- site: aws
-- type: post
-- status: published