CODEWITHSUNDEEP
csstexturesmasking
Ramsay
Ramsay

Reputation: 53

A coloured textured background image

I have found an image that I want to colour. Can I change the colour of the image without having to edit it in an application such as Photoshop. For example.

background-image: url('texture.png');
background-color: blue;

And then use this for multiple sections but changing the colour each time? Just wondering if this is possible and if somebody can tell me how to do it.

Upvotes: 2

Views: 1012

Answers (1)

Paulie_D
Paulie_D

Reputation: 115096

A couple of options (or three).

Background Image with Overlay gradient

div {
  height: 100px;
  margin: 1em auto;
  color: white;
}
.bg-gradient {
  background: linear-gradient(to bottom, rgba(255, 0, 0, 0.25), rgba(255, 0, 0, 0.25)), url(https://wallpaperscraft.com/image/patterns_wavy_background_texture_metal_silver_18405_1920x1080.jpg);
  background-size: 100% auto;
}
<div class="bg-gradient"></div>

Pseudo-element with bg image and CSS filters

MDN Reference

div {
  height: 100px;
  margin: 10px auto;
  color:white;
}


.pseudo {
  position: relative;
  background: #000;
}

.pseudo:before {
  content: '';
  position: absolute;
  top:0;
  left:0;
  height: 100%;
  width: 100%;
 background:url(https://wallpaperscraft.com/image/patterns_wavy_background_texture_metal_silver_18405_1920x1080.jpg);
    background-size: 100% auto;
  }

.pseudo.blue {
  -webkit-filter:sepia(1) hue-rotate(90deg);
          filter:sepia(1) hue-rotate(90deg);
  
}


.pseudo.purple {
  -webkit-filter:sepia(1) hue-rotate(270deg);
          filter:sepia(1) hue-rotate(270deg);
  
}
<div class="pseudo blue">Text</div>

<div class="pseudo purple">Text</div>

Background Blend Mode

MDN Reference

div {
  height: 100px;
  margin: 1em auto;
  color: white;
}
.blend {
  background-image: url(https://wallpaperscraft.com/image/patterns_wavy_background_texture_metal_silver_18405_1920x1080.jpg);
  background-color: #663399;
  background-blend-mode: multiply;
  background-size: 100% auto;
}
<div class="blend"></div>

Upvotes: 3

Related Questions