Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Enhancing Design with CSS

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Background Blend Modes

3:43 with Anwar Montasir

If you’ve ever used Adobe Photoshop, you might be familiar with the Blend Modes available in the layers palette. Here I have a solid tomato-colored box, but if I change blend modes, I can combine the color of the top layer with the mountain photo in the bottom layer in striking ways. If you’ve never used Photoshop, or this isn’t looking familiar, no worries. The takeaway here is that these same visual effects are also built into CSS, and the results can be equally exciting.

Further reading

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    If you've ever used Adobe Photoshop, 0:01
    you might be familiar with the blend modes available in the layers pallet. 0:03
    Here, I have a solid tomato colored box. 0:08
    But, if I change blend modes, I can combine the color of the top layer 0:12
    with the mountain photo in the bottom layer in striking width. 0:17
    If you've never used Photoshop, or this isn't looking familiar, no worries. 0:21
    The takeaway here is that these same visual effects are also built into CSS. 0:28
    And the results can be equally exciting. 0:32
    I'm looking at CSS Tricks' article on background blend modes. 0:38
    As it explains, the background-blend-mode property defines how an element's 0:43
    background image should blend with its background color. 0:47
    This is a handy resource to have open while exploring blend modes. 0:52
    I've personally never bothered memorizing the difference between multiply and 0:57
    darken for example. 1:01
    I can just check this guide to clarify the difference or 1:03
    just experiment in CSS and see which I like best. 1:08
    Let's start our exploration by inserting the mountain 1:11
    photo into the background of our header. 1:16
    We're using the background shorthand once again to specify the URL of the image. 1:34
    To center the image horizontally while setting the background-size property to 1:41
    cover. 1:46
    We're using no-repeat to prevent the image from tiling. 1:48
    And we're keeping the same orange background color we were using before. 1:52
    When we preview in the browser, 2:00
    we don't see the orange color since it's covered by the mountain photo. 2:02
    And as that background image is a bit busy to have legible text on it, 2:07
    this is a good opportunity to explore some background blend modes. 2:12
    Background blend modes are not part of the background shorthand, 2:19
    so we need to specify them separately. 2:26
    I like the way the orange and the mountains are combined here already, but 2:37
    let's try out a few different options such as hard-light. 2:41
    Note that the two terms are separated by a hyphen. 2:48
    Or exclusion. 2:56
    Hard-Light was too light to place light text on, and 3:05
    exclusion looks pretty ominous for a travel website. 3:09
    You can keep exploring here, but I'm going to return the blend mode to multiply. 3:14
    Our Lake Tahoe site is looking pretty solid. 3:26
    In our final stage, we'll use CSS gradients to add a bit more visual splash, 3:30
    and add some finishing touches to improve our site on both small and large screens. 3:35

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up