Home/ Questions/Q 7608633
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T00:58:02+00:00

I’ve been having a hard time figuring out why a linear gradient specified for

  • 0

I’ve been having a hard time figuring out why a linear gradient specified for the body element is stopping after the edge of one of its child elements.

So, I have this HTML:

<!DOCTYPE html>
<html>
    <head>
        <style>
            #container {
                width: 960px;
                height: 700px;
                border: #FFF thick solid;
                margin: auto;
            }
            body {
                background: -webkit-gradient(linear, 0% 0%, 71% 92%, from(#1F4BA0), to(#070322));
                background: -moz-linear-gradient(40% 75% 90deg,#1F4BA0, #070322);
                color: #FFF; border:0px; margin:0px; padding:0px;
            }
        </style>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div id="container"></div>
    </body>
</html>

And this is what the page ends up looking like (notice repeating gradient going down the page): Screenshot of repeating gradient

So, the problem is, the gradient ends at the bottom of the #container element, instead of carrying on to the end of the body. Despite the gradient being declared explicitly within the body CSS element.

Can anyone else help me out here? Much appreciated!

Note: also happens using -moz prefix in FF.

Reading this made me more confused: “[A linear gradient’s] concrete size will match the one of the element it applies to.” This is from Mozilla directly

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I have fixed the issue using this:

    <!DOCTYPE html>
<html>
    <head>
        <style>
            #main {

               background: -webkit-gradient(linear, 0% 0%, 71% 92%, from(#1F4BA0), to(#070322));
               background: -moz-linear-gradient(40% 75% 90deg,#1F4BA0, #070322);
               height:2300px;

            }

            #container {
                width: 960px;
                height: 700px;
                border: #FFF thick solid;
                margin: auto;
            }
            body { 
                color: #FFF; border:0px; margin:0px; padding:0px;
            }
        </style>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div id="main">
            <div id="container"></div>
        </div>
    </body>
</html>
    • 0