HTML CSS

FADE BACKGROUND IMAGE WITH HTML CSS

a quick example

<div id="wrap">    <div id="top">FOO BAR</div>   <div id="back"></div> </div>

* CSS does not have background-image-opacity property.

* SO WE STACK 2 <DIV>, USE AS FOREGROUND & BACKGROUND.

HTML DIV STACKING

01

STACK <DIV> ON TOP OF EACH OTHER #wrap { display: grid; width: 100%; height: 100px; } #wrap > * { grid-column: 1 / 1; grid-row: 1 / 1; }

CONTENTS ON TOP #top { z-index: 2; padding: 10px; }

CSS FOREGROUND BACKGROUND

02

BACKGROUND IMAGE BELOW #back {   z-index: 1; background: url(IMG.JPG);   background-size: cover; opacity: 1; }

HOVER TO FADE BACKGROUND #wrap:hover #back { opacity: 0.5; }

CSS FADE ON HOVER

03