how can I have background-image underneath background-color?

Question

I was wondering if there is a way to place a background-image behind the background-color.

I have this color picker with sliders and when I iterate on the alpha channel I want the checkered image to display under the color I guess I could add the image in html and then position it under the div but isn't there a "cleaner" solution without having to add position: absolute;? I really want to avoid that if possible

I tried using ::before and ::after but so far to no success, the image won't display. I tried with content: url("") but it always stays on top and can't seem to bring it below with z-index

let red = document.querySelector("#red");
let green = document.querySelector("#green");
let blue = document.querySelector("#blue");
let alpha = document.querySelector("#alpha");
let paletteColor = document.querySelector(".paletteColor")
paletteColor.style.backgroundColor = `rgba(${red.value}, ${green.value}, ${blue.value}, ${alpha.value/100})`

red.addEventListener("input", rgbaValue);
green.addEventListener("input", rgbaValue);
blue.addEventListener("input", rgbaValue);
alpha.addEventListener("input", rgbaValue);

function rgbaValue() {
  let rgba = `rgba(${red.value}, ${green.value}, ${blue.value}, ${alpha.value/100})`
  paletteColor.style.backgroundColor = rgba
}

.palette {
  border: 3px solid black;
}

.sliders {
  list-style: none;
  left: 80px;
  display: inline-block;
}

.paletteColor {
  height: 100px;
  width: 100px;
  display: inline-block;
}

.paletteColor::after {
  height: 100px;
  width: 100px;
  display: inline-block;
  background-color: black;
}

.paletteColor::before {
  height: 100px;
  width: 100px;
  display: inline-block;
  background-image: url("./checkered.jpg");
}

<div class="palette">
  <div class="paletteColor"></div>
  <ul class="sliders">
    <li><input id="red" type="range" min="0" max="255" value="150"></li>
    <li><input id="green" type="range" min="0" max="255" value="222"></li>
    <li><input id="blue" type="range" min="0" max="255" value="22"></li>
    <li><input id="alpha" type="range" min="0" max="100" value="100"></li>
  </ul>
  <div>

IMO an absolutely positioned background checkerboard image is the simplest solution here — j08691, Mar 14 '19 at 19:52
OProblem is the image will not be seen since the background color will be opaque... — epascarello, Mar 14 '19 at 19:54
This post might be helpful https://stackoverflow.com/questions/8195215/css-background-image-on-background-color — Shihab, Mar 14 '19 at 19:54

score 2 · Answer 1 · answered Mar 14 '19 at 19:57

#img-wrapper {
  background: red;
}

img {
  width: 100%;
  opacity: 0.5;
  vertical-align: middle;
}

<div id="img-wrapper"><img src="https://images.freeimages.com/images/large-previews/25d/eagle-1523807.jpg" alt=""></div>

This adds an overlay over an actual image.

Pranav C Balan · Accepted Answer · 2019-03-14T20:14:25.230

You can use ::before with the background color.

div {
  position: relative;
  width: 100px;
  height: 100px;
  background-image: url(//img.pranavc.in/100)
}

div::after {
  position: absolute;
  content: '';
  background-color: rgba(100, 0, 1, .5);
  width: 100px;
  height: 100px;
}

<div></div>

Or better alternative by putting image within ::before and then reducing it's z-index value which makes the div accessible.

div {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: rgba(100, 0, 1, .5);
}

div::after {
  position: absolute;
  content: '';
  width: 100px;
  height: 100px;
  background-image: url(//img.pranavc.in/100);
  z-index: -1;
}

<div></div>

score 0 · Answer 3 · answered Mar 14 '19 at 20:06

Okay I figured out if I set the position to absolute and play with z-index that it works, only thing is that I'm using content instead of background-color.

.paletteColor{
    height: 100px;
    width: 100px;
    display: inline-block;
    z-index: 0;
}

.paletteColor::before{
    height: 100px;
    width: 100px;
    display: inline-block;
    position: absolute;
    z-index: -1;
    content: url("./checkered.png");
}

how can I have background-image underneath background-color?

3 Answers3