Adding transparent color to header

  • Resolved casierpe

    (@casierpe)


    9 years, 3 months ago

    Hello everyone!

    I’m coming to you because I would like to add a color with 40% opacity on top of the images of the header to make the images look kinda red. Something like this but with CSS:

    Right now I’m doing that manually in Photoshop, but soon I’ll change the static header image to featured posts, and I understand that the featured image shown on the header is the same as the post, but I don’t want the image at the post to be red-ish, only the one at the header. Thats why I need to do it with CSS.

    Sorry if I wasnt able to explain this properly.

    My page is http://caae.cl/

Viewing 3 replies - 1 through 3 (of 3 total)
  • Chad Chadbourne

    (@shireling)

    9 years, 3 months ago

    Hi @casierpe!

    You can add a filter with some CSS like this:

    .site-banner:after {
    display: block;
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background: rgba(255,0,0,.4);
}

    That turns the :after psuedoelement into an overly with a semi transparent background color.

    If needed, you can adjust the rgba color to whatever you were envisioning 🙂

    Thread Starter casierpe

    (@casierpe)

    9 years, 3 months ago

    Thanks! worked perfectly :), can I mark this as resolver or a moderator has to do it?

    Chad Chadbourne

    (@shireling)

    9 years, 3 months ago

    Awesome! Glad it worked 🙂

    You can use the sidebar on the right to mark the thread as resolved.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Adding transparent color to header’ is closed to new replies.