Home css overlay translucent color on the background-image

overlay translucent color on the background-image




How to apply color with transparency in 0.3 (for example, red) on Background-image: url (); ?

Answer 1, Authority 100%



& lt; div class = "img" & gt;
  & lt; div class = "img-overlay" & gt; & lt; / div & gt;
& lt; / div & gt;


* {
  Padding: 0;
  margin: 0;
.img {
  width: 500px;
  Height: 500px;
  Background: URL (http://vmeste.eu/fun/1142791216.jpg) NO-REPEAT CENTER TOP;
.img-overlay {
  width: 100%;
  HEIGHT: 100%;
  Background: RGBA (255,0,0,0,3.3);

Answer 2, Authority 125%

Answer from @ Dmitryvasilievich was true, but you need to swap gradient and background image:

 Linear-gradient (to top, RGBA (255,0,0,0.3), RGBA (255,0,0,0,3.3)),
 URL (http://vmeste.eu/fun/1142791216.jpg);

An image going in code above overlaps the image goes down below.

Also can also separately for gradient and image Set other background properties:

background-repeat: no-repeat, no-repeat;
Background-Size: Cover, Contain;

Answer 3, Authority 25%

background: url (http://vmeste.eu/fun/1142791216.jpg), Linear-gradient (To , Top, RGBA (255,0,0,0.3), RGBA (255,0,0,0.3));
Previous articleSmooth scroll page
Next articleProcessing INPUT RADIO

Programmers, Start Your Engines!

Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.

Recent questions