Home/ Questions/Q 6083289
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T11:23:07+00:00

<html> <head> <style type=text/css> *{padding:0;margin:0;} body{ background: -webkit-gradient( linear, right bottom, left top, color-stop(0.25,

  • 0
<html>
<head>
<style type="text/css">
    *{padding:0;margin:0;}
    body{
        background: -webkit-gradient(
            linear,
            right bottom,
            left top,
            color-stop(0.25, #F5A432),
            color-stop(0.63, #F0F050)
        );
        background: -moz-linear-gradient(
            right bottom,
            #F5A432 25%,
            #F0F050 63%
        );
    }

    .box{margin-left: 33px; width:100px; height: 100px; background-color:rgb(69,69,69); border: 1px solid rgb(56,56,56);border-radius: 25px; float:left}
    #container{padding-left: 37%; padding-right: 30%; width: 1000px; background-color: rgb(64,64,64); position:fixed}
</style>
</head>
<body>
    <div id="container">
        <div class="box">
        </div>
        <div class="box">
        </div>
        <div class="box">
        </div>
    </div>
</body>
</html>

No gradient is showing in the code above! Just a plain white background. Why?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The only element inside body (#container) has position: fixed.

    An element with position: fixed is removed from normal flow, so the body has no height.

    You can “fix” this with:

    html {
    height: 100%
}
body {
    min-height: 100%
}

    See: http://jsbin.com/alucix

    • 0