Background Gradient Not Working

HTML & CSS
1

Hey Friends! I have been trying to add some gradient to the body of my template and after a couple of goes it still does not show up, I have read some browsers do not support it, yet when I go to other sites I can see gradient so I am guessing my browser does. Hopefully I am not making a dumb mistake? Ok here is the code I am using in my css

body { 
	background:#D8D8D8;
	background: linear-gradient (top to bottom, #D8D8D8 0%, #585858 100%);
	background: -moz-linear-gradient (top to bottom, #D8D8D8 90%, #585858 100%);
	background: -webkit-linear-gradient (top to bottom, #D8D8D8 0%, #585858 100%);
	background: -o-linear-gradient (top to bottom, #D8D8D8 0%, #585858 100%);
}
2

I was able to go to w3 and find this and I did actually get a result, however I am still wondering why the first try did not work? At least now I have something to play around with, have a good weekend (friday evening here in Australia)

body { background: red;

    background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1));
	
}
3

I think the keywords should be just to bottom without the top as well. I think it’s one or the other, not both.

I find this website useful for creating gradients, although many of the browser prefixes can be omitted these days.

1 Like
4

If you want the gradient to to fill the viewport height only and not stretch with content then the best way to do it is like this.

body:before {
	content:"";
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:-1; 
	background:#D8D8D8;
	background: linear-gradient(to bottom, #D8D8D8, #585858) ;
}

You can get a similar effect using background-attachment:fixed on the body element but that doesn’t work well on a lot of mobile devices.

I would also forget the vendor prefixes on gradients these days as they are well supported now unless you need to support older machines.

1 Like
5

Thanks, something to try

6

I was wondering about those messages to browsers, i guess if you are reading older articles you still get this, thanks

7

Those prefixes probably added to your problems because of how you ordered them.
You had the non-prefixed version first, that means it could be overridden by the prefixed versions.
The non-prefixed version should always be last, if you use prefixes at all.

This can help show what is supported and what needs a prefix.

1 Like
8

Yep, that makes sense, thanks

9

I did give this site a visit, what threw me was the preview section specifies a size? What if I wish to do the full screen, is there a standard sizing option to use I wonder?

10

I think that size is just for the preview. All the stops in the gradient are in % so should scale to any size container.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.