Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

mrx3
mrx3
8,742 Points
Posted by mrx3
mrx3
8,742 Points

I'm having some trouble adding a transparent linear gradient to a background image. Codepen included.

codepen: http://codepen.io/mike316/pen/RPKZGR

I found a neat css property called opacity. MDN about opacity: https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

So I added these two duck images. The first image has the opacity property applied to it. I would like to add a transparent linear gradient to the second image so you can see through the gradient to the image below. I tried to set the opacity to a low enough level, but it doesn't seem to work. I've tried everything and I can't seem to get it to work. Can someone help me with this please. Thank you for any help.

mrx3
mrx3
8,742 Points
mrx3
mrx3
8,742 Points

I think I fixed my problem. On line 33 of my code pen, I added 

linear-gradient (
rgba(255, 0,0, 0.45),
rgba(255,0,0,0.45)),

Now the image is a transparent red background. :D

1 Answer

Codin - Codesmite
Codin - Codesmite
8,600 Points
Codin - Codesmite
Codin - Codesmite
8,600 Points

You are overiding your background that sets your background image of the ducklings.

CSS uses cascading rules and you are re-declaring your background to be a gradient rather then have a background image.

An easy way to solve this is to have a container inside the container with the ducklings as the background that has a transparent linear background like this:

<html>
<head>
    <meta charset="utf-8">
    <title>Opacity Practice</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="wrapper">
        <div class="container-1">
            <div class="content">
              <h1>The Duck</h1>
          </div>
      </div>
      <div class="container-2">
        <div class="container-3">
          <div class="content">
            <h1>The Ducklings</h1>
        </div>
    </div>
</div>
</div>
</body>
</html>

/* Setting the box sizing rule */

* {
    box-sizing: border-box;
}

/* Centering the page */

.wrapper {
    max-width: 60em;
    margin: 0 auto;
}

/* Adding a background image to .container-1 */

.container-1 {
    background: url('http://upload.wikimedia.org/wikipedia/commons/2/24/Male_mallard_duck_2.jpg') no-repeat center center;
    background-size: cover;
    height: 37.5em;
    opacity: .70;
}


/* Styling the heading h1 in the .content section */

h1 {
    padding-top: 1.1em;
    text-align: center;
}

/* Adding a background to the .container-2 */
.container-2 {
    background: url('http://wallpapers111.com/wp-content/uploads/2015/01/Ducks-HD-Wallpapers8.jpg')no-repeat center center;
    background-size: cover;
    height: 30em;

}

/* Adding a gradient to the .container-3 */
.container-3 {
    background: -moz-linear-gradient(-45deg,  rgba(64,150,238,0.36) 0%, rgba(64,150,238,0.18) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(64,150,238,0.36)), color-stop(100%,rgba(64,150,238,0.18))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  rgba(64,150,238,0.36) 0%,rgba(64,150,238,0.18) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  rgba(64,150,238,0.36) 0%,rgba(64,150,238,0.18) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(64,150,238,0.36) 0%,rgba(64,150,238,0.18) 100%); /* IE10+ */
    background: linear-gradient(135deg,  rgba(64,150,238,0.36) 0%,rgba(64,150,238,0.18) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5c4096ee', endColorstr='#2e4096ee',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    background-size: cover;
    height: 30em;
}

Codepen: http://codepen.io/anon/pen/dovowd

mrx3
mrx3
8,742 Points
mrx3
mrx3
8,742 Points

That looks great. Thank you for the help !!!!