Log in

View Full Version : background gradient problem


gib65
12-10-2015, 07:39 PM
Hello,

Here's a problem that seems relatively simple to fix, but I need help.

Please save the follow code into a file and load with a browser:



<html>

<head>

<style>

html
{
background: -webkit-linear-gradient(left top, red, #000000, blue);
background: -o-linear-gradient(left top, red, #000000, blue);
background: -moz-linear-gradient(left top, red, #000000, blue);
background: -ms-linear-gradient(left top, red, #000000, blue);
background: linear-gradient(left top, red, #000000, blue);
}

</style>

</head>

<body>

<div style="min-width: 800px;">
<img src="MyImg.png">
</div>

</body>
<html>


For the image, please use the attachment.

Once you've got the page loaded in a browser, you should be looking at a banner at the top displaying the png I attached. The background should show a diagonal gradient going from red to blue.

Now please shrink the browser horizontally. That is, grab the right edge with your mouse and drag it left until a scroll bar shows up at the bottom. This should result from the fact that the div with the banner at the top has a min-width of 800px, and when you shrink the browser below 800px in width, it should enable its horizontal scroll bar.

Now that the scroll bar shows up, scroll to the right. You'll see that the gradient repeats itself at the point where it used to be at the right edge of the viewport (before you scrolled).

So this is the question: is it possible to get the gradient to cover the entire area of the page, even those section that you have to scroll to, so that you don't notice a seam between where it first appears and where it repeats?
jscheuer1
12-12-2015, 01:54 AM
The obvious would be to set the min-width on the html element to slightly more than 800px (like 850px). But that implies knowing what width will cause the scrollbar (in this case the 800px banner div). If that's not known, use one of:

Two options I see right off, neither perfect, but both take care of the problem. It would depend upon which downside is less undesirable, as to which you choose.

1)
html
{
background: -webkit-linear-gradient(left top, red, #000000, blue);
background: -o-linear-gradient(left top, red, #000000, blue);
background: -moz-linear-gradient(left top, red, #000000, blue);
background: -ms-linear-gradient(left top, red, #000000, blue);
background: linear-gradient(left top, red, #000000, blue);
overflow-x: hidden;
}

With that, no horizontal scrollbar can appear. Advantage - can't scroll to see that the background repeats. Problem - really narrow windows/screens cannot see entire page without changing orientation and/or zoom level.

2)
html
{
background: -webkit-linear-gradient(left top, red, #000000, blue);
background: -o-linear-gradient(left top, red, #000000, blue);
background: -moz-linear-gradient(left top, red, #000000, blue);
background: -ms-linear-gradient(left top, red, #000000, blue);
background: linear-gradient(left top, red, #000000, blue);
width: 200%
}

Now there will always be a scrollbar (the downside), but on the plus side, you can almost never scroll far enough to see a repeat of the background (if the window becomes extremely narrow, you could).

Failing all that (if none of these are acceptable, they do all sort of work), one could use javascript. But it would be jerky sometimes, and of course wouldn't work when javascript was unavailable.

One other option would be to use a gradient image and have it scale. (background-size property set to cover, I believe - unfortunately doesn't work with linear-gradient value, does work with background images though)