How to add a gradient overlay to a background image using just CSS and HTML

How to add a gradient overlay to a background image using just CSS and HTML Thumbnail image

How to add a gradient overlay to a background image using just CSS and HTML Table of contents

  1. How to add a gradient on top of a background image?
  2. How to add a gradient background to a div without using images

    Adding a background image to a <div> (or any other tag) is easy using CSS. Here it is (without gradient yet):

    1. <div id='show_bg'>something here</div>
    1. #show_bg {
    2. background-image: url('images/background.jpg');
    3. width: 80%;
    4. height: 200px;
    5. background-size: cover;
    6. }
    something here

    I've put some other rules on the div to set the background image to fill the whole div (cropping if needed) with the background-size: cover. The width is 80%, so resize your browser to see how this background-size works. (It will crop the image to ensure it fits correctly).

    How to add a gradient on top of a background image?

    If you wanted to add a semi opaque/semi transparent colour gradient that goes on top of the background image, your first thought might be to overlay another div (or use the :after css selector).

    However, the easiest way to do it is to just add another parameter to the background-image css rule.

    Take a look!

    1. <div id='show_bg_2'>something here</div>
    1. #show_bg_2 {
    2.  
    3. background-image:
    4. linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)),
    5. url('images/background.jpg');
    6.  
    7. width: 80%;
    8. height: 400px;
    9. background-size: cover;
    10. }
    something here

    Both divs are using the same background image, but the second one has a linear-gradient on it. The rgba(x,y,z,o) is the colour (first three numbers = red/green/blue. The 4th param (0.52) is the opacity - 1.0 is fully visible, 0.0 is invisible).

    How to add a gradient background to a div without using images

    You can also easily add a gradient background to a div (or any other HTML element) without using images, using the following CSS rules.

    BTW, I've set the gradient to start at red and end in blue. It might not look pretty, but it is so you can click the buttons below to swap its position, and quickly work out what direction it is facing.

    something here (no images involved)
    switch to top switch to top left switch to top right switch to left switch to right switch to bottom left switch to bottom right
    1. <div id='show_bg_3'>something here (no images involved)</div>
    1.     #show_bg_3 {
    2.     background-image:    linear-gradient(to top right, #f00, #00f);
    3.  
    4.     width: 80%;
    5.     height: 200px;
    6.     background-size: cover;
    7.     color:white;
    8.     }
    webdevetc profile pic
    webdevetc

    I am a 29 year old freelance backend web developer from London, mostly focusing on PHP and Laravel lately. This is my site - I mostly write about PHP here. Contact me here (especially for any contracting jobs early 2019 in London ;) ).

    Leave a Comment