Hey all,
How do we best in todays CSS world create a gradient based background that fills the entire provided DIV?
So how do we create a nice bakcground that goes from dark Purple at the top to light Purple at bottom lower?
Thanks,
Hi there Worldnews,
here is one possible example…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<link rel="stylesheet" href="screen.css" media="screen">
<style media="screen">
body {
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
div {
width: 60vw;
min-height: 37.2vw;
margin: auto;
border: 1px solid #000;
background-image: linear-gradient( 130deg, #300030, #a000a0 85%, #d000d0 );
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
}
</style>
</head>
<body>
<div></div>
</body>
</html>
coothead
Wouldn’t it be background and not background-image?
It depends on what you want / need to use
3 Likes
It will work using the shorthand background property, in the same manner that a typical background image would work with background.
Though technically the linear gradient is defined as an image, as pointed out in the link above.
I always use shorthand properties as much as possible.
1 Like
The Ultimate CSS Gradient Generator is still a useful tool, although you probably don’t need to use the vendor prefixes these days.
Using the example from @coothead you can make the gradient vertical by using 180deg instead of 130deg, Or maybe easier to remember using a keyword.
e.g.
background-image: linear-gradient( to bottom, #300030, #d000d0 );
Is equivalent to background-image: linear-gradient( 180deg, #300030, #d000d0 );
If you are talking about the whole body background and not a div as such then you are better off with a fixed gradient.
Coot,
1st, Sorry for delay in replying. Doing 20 peoples Job 
So I have tried your suggestion and looks nice. Just one issue, there are these Zebra stripe bars at 45 degrees about 100 px apart. As you can see here:
https://www.anoox.com/temp/gradient_based_back.php
How can we get rid of those Zebra stripe bars?
Also there is like a 50 px White margin-left and on right side the DIV is out of screen causing the scroll bar at bottom!
How can we get the DIV to fill entire width without any blank margins on left and without causing scroll bar appearing?
Hi there WorldNews,
[quote]
…there are these Zebra stripe bars
[/quote]
I do not see that effect in my test browsers, Firefox, Chrome and IE11. 
Which browser(s) is/are playing up?
As for your other problems try this amended CSS…
body {
margin: 0;
background-color: #f9f9f9;
font: 100% / 162% verdana, arial, helvetica, sans-serif;
}
#back_holder {
width: 100vw;
min-height: 37.2vw;
border: 1px solid #000;
box-sizing: border-box;
background-image: linear-gradient( 130deg, #300030, #a000a0 85%, #d000d0 );
box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
}
coothead
1 Like
At first I didn’t see those stripes, but at a minimized screen they appeared.
I’m not going to crop the images just to show the images.
Minimized:
Full screen:
Hi there brianfrank,
I do not see that effect, at any width, in my
test browsers, Firefox, Chrome and IE11.
Which of your browsers is playing up for you?
coothead
I would call them “ripples” not zebra stripes, but I see what you mean. Kind of like a shadow affect at the transitions. I’m wondering if it’s actually that or an optical illusion caused by aliasing artifact. Any way you can get a color picker to sample pixels around a transition? If you change the angle to be perpendicular to the x or y axis does it not happen?
1 Like
The images are from Samsung internet. I just tested in my Chrome browser too and it’s there as well. As you may not know, I generally only visit here using my smartphone, but use view-source before the URL to view the code.
However, those lines only appear when I have 2 tabs open. Just like the minimized image I posted.
@WorldNews, where’s your stylesheet? I clicked the link and it came up not found.
I like the gradient though, it looks really cool.
I’m going to turn on my laptop to see if I can replicate the lines here in a bit.
That sounds like it might be a graphics card limitation. If that’s the case I don’t think there will be much that can be done about it.
Nope. Sounds as if the OP has to deal with it. It only happens on my smartphone, I sure can’t replicate it using my laptop. It’s always nice coming here though, I can’t count the number of issues I’ve had that other’s had and find the answer.
I see it in brianfrank’s screenshot, but not in any live example of css gradients.
I call that phenomenon banding, it is commonly seen when an image is viewed at a reduced bit-depth. There are not enough bits to interpolate the colours in-between each band of colour to give a smooth gradient display.
The “shadow” is an optical illusion, it does not exist. Each band is a solid, flat colour. The shadow is an illusion caused by the slight contrast between one band and a slightly lighter one adjacent to it, which makes the fringe appear to be darker than the rest of the band.
That is exactly what it is, if you don’t have sufficient bit-depth, you can’t display that many colours, not without dithering, which I don’t think browsers do.
2 Likes
Ah! margin: 0; in Body. Ok that took care off the blank space on left. Thanks.
About the Zebra effect, yes it is strange it happens on some browsers on some devices but not all!
So I think we can chuck that off as acceptable due to occasional browser misbehavior
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.