Home/ Questions/Q 7400291
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T04:13:35+00:00

I have web pages with a boring white background and all their contents (the

  • 0

I have web pages with a boring white background and all their contents (the website logo and several google charts) are of the fixed width 700px and centered:

    h1,h2,h3,p,div,form { 
    text-align: center; 
}

I’d like to add a vertically-tiled png image underneath (just a stripe of 1px height), which would display a fixed width 800px of white and the rest should be some other color (like red in the example below) or gradient and should grow
with the page width:

enter image description here

How do you do it best (i.e. most reliable and for most browsers) with CSS or HTML?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’ll need to put your content into a container of 800px in order to achieve both, the red or gradient background and the striped PNG effect. So all your content would then go into a .container div and your styles would be:

    body{
   background:#ff0000;
}

.container{
    width:800px;
    margin:0 auto;
    position:relative;
    background:url('/path/to/image/image.png') repeat 0 0;
}

    So all your content which currently appears in the body tag, will have to be placed in the .container div tag like so:

    <body>
    <div class='container'>
        <p></p>
        <h3></h3>
        .....
    </div>
</body>

    Ideally, if you’re targeting a minimum screen resolution of 800 x 600, your .container width should be lesser than 800 to avoid the horizontal scrollbar.

    You might also find the links below useful in trying to create both, cross-browser gradients and the PNG:

    1. Stripe Generator – http://www.stripegenerator.com/

    2. CSS gradient creator – http://www.colorzilla.com/gradient-editor/

    The gradient creator above creates gradients using CSS and also has support for IE. In IE however, since the gradients are created using IE filters, it tends to cut any content hidden inside it, instead of allowing it to overflow. You can always also just use an image to create the gradient.

    You might also want to consider using CSS PIE, for IE compatibility – http://css3pie.com/

    Hope this helps.

    • 0