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

Question

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.

Answer 1 · 2015-06-02T10:17:06Z

June 2, 2015 10:17am

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

Welcome to the Treehouse Community

Looking to learn something new?

mrx3

mrx3

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

mrx3

mrx3

1 Answer

Codin - Codesmite

Codin - Codesmite

mrx3

mrx3