Today’s Goal:

• Create a quote page with a blended background image and color using the background-blend-mode property

 Today’s featured site:

• https://youtubedetox.skynox.tech/ – This site acts as an alternative search for YouTube so you don’t get distracted by other videos.

 CSS Blend Modes

• The background-blend-mode property blends background layers together (example: background image and background color).
• Let’s see what the background-blend-mode property values look like in action here . Let’s also play around with the values here .
• My example:
  With background-blend-mode
  
  Without background-blend-mode
  
• Your practice:
  • You’re going to make a quote page using the background-blend-mode property to blend your background image with a background color.
  • You will need to choose a quote, a background image to go with the quote, a background color, and a Google Font
  • Tools:
    Color: https://materialuicolors.co/ (or another color site of your choice)
    Background image: pexels, unsplash, pixabay
    Google Fonts: https://fonts.google.com/
  • Skills practiced:
    HTML: setting up webpage with correct HTML code in correct order (html, head, title, style, body, and div tags)
    CSS: style content with color, font-family, font-size, background-image and color; use ID selector correctly for the wrapper
    Graphic design: background image, use of color, typography
  • To do:
    1. Open Notepad++ and start a new page with opening and closing html, head, title, style, and body tags. Save as backgroundblend.html
    2. Title tag should say CSS Blend Mode Practice
    3. Add body, #wrapper, h1, and p selectors inside of the style tags in your head section. Put opening and closing curly brackets with each one and skip a space to add CSS later.
    4. Code check #1: click to view
    5. Go to the #wrapper ID selector in your style sheet and add margin: 0px auto; width: and height: (leave blank for now); background-color: (leave blank); and background-image: url(‘image name’); background-position: center; background-repeat: no-repeat;. You will need to add in the image name for your background image later (example: sky.jpg).
    6. Go into your body section and under the opening body tag add div id=”wrapper” and add a closing div tag just above the closing body tag.
    7. Code check #2: click to view
    8. Choose a background image from one of the sites above. Download a size between 1200-1900 pixels; nothing smaller or bigger. SAVE IT IN THE SAME LOCATION AS YOUR WEBPAGE!
    9. Type the background image name inside of background-image: url(‘image name’);. Example: background-image: url(‘sky.jpg’);
    10. Make the width and height in your wrapper match the width and height of your image. For example, if your image is 1800 x 700, make your wrapper width 1800px and the height 700px.
    11. Choose a background color for both your body and wrapper. They can have the same or different colors. YOUR BACKGROUND IMAGE WILL BLEND WITH THE BACKGROUND COLOR OF THE WRAPPER BECAUSE THE IMAGE IS DIRECTLY INSIDE OF THE WRAPPER. The body background color is the color you will see if your background image doesn’t quite fit your whole screen (no big deal).
        Choose a color (or colors) that contrast with your background image.
    12. Type or copy/paste your quote inside of h1 tags inside your body section.
    13. Type or copy/paste the image quote author’s name in paragraph tags below your h1. If you don’t know who said it, use Anonymous.
    14. Choose a color for your font and add it to your body selector. Example: color: blue;. Adding the color to your body selector will make the font the same color on your webpage rather than separately adding the color property to the h1 and p selectors (not necessary unless you want them to be different colors).
    15. Type text-align: center; to your body selector to center all of your text.
    16. Choose a Google Font. Click on one you like, copy/paste the link to the font-family in your head section right below your title tags and above your style tags, and copy/paste the font-family into the body selector.
    17. Choose a large font-size for your h1 (quote text) and a smaller font-size for your p (author name). Use the font-size property inside both the h1 and p selectors and make them different values.
    18. Optional but likely necessary to make text more readable: use the text-shadow property inside of your body selector to give all of your text a drop-shadow. Example: text-shadow: 2px 2px black; (you can change the size and color).
    19. Move your text down from the very top of the page by adding position: relative; to both your h1 and p selectors (any thoughts on why?). Then use the top property to push the text as far down the page as you want. For example: top: 100px; or top: 10%;
    20. Big, giant code check! click here
    21. Now is a great time to visually review your page before adding a background-blend-mode. Do you like the font-family? How does the color of your font contrast with the background image? Can you read it? If you can see the background-color of your body section, how does that look with the background image? Is your text too big or too small? Does the text need to come up higher or pushed lower? Make any changes you need to!
    22. Now add background-blend-mode: to your #wrapper selector and choose any value you want. This site  is very helpful to see all of the values in action. Try them out and settle on one you like. For example: background-blend-mode: luminosity;