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.     }

    Subscribe to my spam free newsletter for other Laravel updates like this

    I never spam, and only email when I have a good in-depth post published on my site (mostly about Laravel). You can also follow me on social media to get updates.

    webdevetc profile pic
    webdevetc

    I'm a late 20's web developer, specialising in Laravel, but work with other PHP frameworks and associated technologies (such as JS). I mostly write about PHP here. Contact me here. Need to hire or work with a contract PHP software developer in London, UK (or freelance)? Contact me and check my availability.

    Leave a Comment