CODEWITHSUNDEEP
htmlcssbackgroundbackground-image
Alexander Farber
Alexander Farber

Reputation: 22958

How to display a centered background of fixed width

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?

Upvotes: 0

Views: 789

Answers (2)

Hariharan Anbazhagan
Hariharan Anbazhagan

Reputation: 1329

If you want to add a 1px height image as the backgound, find the below code

/*CSS*/
 body
 {background:#ff0000;}

 .main
 {
  text-align:center; 
  width:800px; 
  background-image:url('https://i.sstatic.net/LNBYu.png');
  background-repeat:y-repeat;
  background-position:center;
  min-height:300px;
 }

/*HTML*/
<body>
<div align="center">
  <div class="main">
     Your Content Goes Here       
  </div>
</div>
</body>

You can see the result as follows.... (Here I'm repeating the 1px height image vertically, so you can see your background is filled with the image)

enter image description here

or Click here to See the Result

Hope this help you !! Any other questions on top of this, pls do comment !

Upvotes: 0

Sagar Patil
Sagar Patil

Reputation: 1948

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.

Upvotes: 2

Related Questions