Jump to content

How to have background color over background image


Recommended Posts


<div class ="buyerform"> .....</div>

I have css which places a background image. 

.buyerform {
    background-image: url(/newsite/sites/default/files/davishouse.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 100%;
    padding: 100px 15% 100px 15%;
    background-color: #443838;

Is there way I can have color on top of the image with some opacity? I tried this but had no effect on it. 

.buyerform:before {
    text-align: left;
    color: #afa69c;
    background-color: red;


Link to comment
Share on other sites

Along with :before or :after you have to use content: property, this can be used to create a textual element to style like you normally can with any other html element. You then have to have it the height and width of what is the parent element by using for instance position: absolute with left:, right,: bottom: and top: properties

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...