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

Posted by Sunshine Khawaja
Sunshine Khawaja
1,845 Points

Full page background image with a linear transparent gradient. Background is repeating itself at bottom.

I applied a full page background image and it works just fine until I added a linear gradient. When the gradient is applied, I can see at the very bottom of the browser that the gradient is beginning to repeat itself. Why is this happening only when the gradient is applied? The image is set to center and no repeat.

Brandon Wyles
Brandon Wyles
2,533 Points

instead use

background-size: cover;

this is the modern way of setting a background image to "cover" the entire area

this does mean your background needs to be set as a background-image

Sunshine Khawaja
Sunshine Khawaja
1,845 Points

Yes I did that. I used the html element to put it in. Wasn't sure what other way would be best.

'''css html { background: linear-gradient(#5EBC9C, transparent 90%), url('../img/tree.jpg') no-repeat center;

background-size: cover; }'''

Brandon Wyles
Brandon Wyles
2,533 Points

in your css you've put

background: linear-gradient(#5EBC9C, transparent 90%), url('../img/tree.jpg') no-repeat center;

it needs to be...

background-image: url('../img/tree.jpg'); background: linear-gradient(#5EBC9C,transparent 90%);

^^ 'should' work

with the gradient have you tried RGB?

Sunshine Khawaja
Sunshine Khawaja
1,845 Points

I tried that and it didn't work. The opaque color completely overrides the image. The way I have it now was the way Gil explained it in one of the CSS classes on Gradients but he was just doing a header with a background image and gradient. I think the issue is that I'm trying to do a full page.

1 Answer

Peaches Stubbs
Peaches Stubbs
21,320 Points
Peaches Stubbs
Peaches Stubbs
21,320 Points

I agree with Brandon Wyles. But you did say that you added a gradient. Are you trying to have two backgrounds on the same page ?

Sunshine Khawaja
Sunshine Khawaja
1,845 Points

One full page background and then a linear gradient over it. It's the linear gradient that looks like it's beginning to repeat on the bottom of the browser. Maybe I need to learn how to use codepen so I can post a link to it.