Home/ Questions/Q 7892253
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T06:49:26+00:00

I want to have gradient all over the HTML document, and in center of

  • 0

I want to have gradient all over the HTML document, and in center of BODY tag I need another background centered.

Edit to see how much it fails try it out:

http://xn--wiadomesny-37b.pl/bg

This image explains it:

enter image description here

It fails if I put in CSS, only 1 background is displayed even, if underneath should be displayed repeat-y background:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html {
    background-color: #ffeacd;
    background-image: url(bg.png);
    background-repeat: repeat-x;
}
body {
    background-image: url(bg_overlay.png);
    background-repeat: no-repeat;
    background-position: center;
}
.content {
    width:1020px;
    padding: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
}
</style>
</head>
<body>
<div class="content">
  <p>This content is closed in 1020px wide DIV, as to merge in most displays. </p>
  <p>Rest around is an background seen or unseen depends on users screen size. </p>
  <p>Me got 24'' so its obvious that I will see all backgrounds and even gradients as 
    blank space fillers</p>
  <p>
  <h1>See how much it fails in various browsers:</h1>
  <ul>
    <li><a href="chrome.png">Chrome</a></li>
    <li><a href="ff.png">Firefox</a></li>
    <li><a href="ie.png">IE</a></li>
  </ul>
  </p>
  )</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think this should help you:

    html {
           background: #ffeacd url(bg.png) 0 0 repeat-x;
           width:100%;
           height:100%;
     }
body {
           background:transparent url(bg_overlay.png) center center no-repeat;
           width:100%;
           height:100%;
     }
.content {
           width:1020px;
           padding: 0px;
           margin-top: 0px;
           margin-right: auto;
           margin-bottom: 0px;
           margin-left: auto;
         }
    • 0