Transparent Gradients

Question

I have a background-image working fine but when I try and do the gradients I get nothing.
If I try and put all the background info in one "background" category like in the video, I suddenly lose my background image.
Here's my code if someone can explain what I am doing wrong. Thanks.
If I do background: and then all the values Guil uses, I lose my image. But when I put my image path and no repeat and center all in one background:  then I lose the background-image. So I know I missed something somewhere. 
.main-header {
    text-align: center;
    padding-top: 170px;
    height: 850px;
    background-image: url('../img/armshigh.jpg'); 
    background-repeat: no repeat;
    background-position: center;
}

Uziel Cohen · Answer

Hi!
Can you please write down the gradient code that you wish to apply to the background image? It should help the community understand what went wrong.
But, in short, i would suggest to use the example of the following code (since it works for me...) :
background: linear-gradient(0deg, #222, transparent 35%),
                linear-gradient(90deg, #222, transparent 68%),
                linear-gradient(180deg, #222, transparent 35%),
                linear-gradient(270deg, #222, transparent 68%),
                url('img/m26mod.jpg') no-repeat center;
Of course you should change the values as needed.
I hope it'll help. :)

Welcome to the Treehouse Community

Looking to learn something new?

Scott Raymond

Scott Raymond

Transparent Gradients

1 Answer

Uziel Cohen

Uziel Cohen