How to overlay image with color in CSS?


Tags: html,css,html5,css3,overlay

Problem :

Objective

I want a color overlay on this header element. How can I do this with CSS?

Code

HTML

<header id="header">
    <div class="row">
        <div class="col-xs-12">
            ...
        </div>
    </div>
</header>

CSS

#header {
    background: url(../img/bg.jpg) 0 0 no-repeat fixed;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF
 }


Solution :

You should use rgba for overlaying your element with photos.rgba is a way to declare a color in CSS that includes alpha transparency support. you can use .row as an overlayer like this:

#header {
    background: url(../img/bg.jpg) 0 0 no-repeat fixed;
    height: 100%;
    overflow: hidden;
    color: #FFFFFF
 }

.row{
    background: rgba(39,62,84,0.82);
    overflow: hidden;
    height: 100%;
    z-index: 2;
}

    CSS Howto..

    How to get a div text from html content

    How to make full width image responsive? (no scale / stretch)

    How to remove text flicker in CSS?

    How to positioning the tooltip above cursor

    How to style this with css? [closed]

    How to use one icon from different image files?

    How to change radio button place & add line separator

    How to apply CSS correctly to iFrame?

    How to customize devise login and signup forms created using the simple_form gem?

    How to Move Parent Div Position using css on hover

    How to do grid of div elements?

    How to achieve a photo “stack” border effect with CSS?

    How to set link on image using maplink in responsive theme?

    How to make Visual Studio stop “compiling” .js and .css files

    How can i get an image inside an li to disregard padding with css

    How to position
    below rest of elements

    How to use -webkit-appearance: searchfield-results-decoration?

    How to keep long image within background cover at any screen size in CSS?

    C# How to base64 encode background gradient

    how to change CSS on the youtube subscribe widget

    How to remove unwanted white space in CSS

    How to make a content div stretch from a header div to a footer div?

    How to extract attribute values using css selectors?

    How to align text next to a “div” in HTML/CSS?

    iOS How to access Library in CSS Url's?

    How can I add a css property to the first div with a specific class name?

    How to center [image + text] of unknown width?

    CSS - How to use by ID and by class

    Is my code HTML and CSS proper, and how do I add a hover effect to just the text in the nav bar?

    How to build a responsive padding for list menus using CSS?