1 Attachment(s)
background gradient problem
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:
Code:
<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?
