Home/ Questions/Q 6871255
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T03:46:58+00:00

I’m trying to implement a design in CSS that will have a tiled background

  • 0

I’m trying to implement a design in CSS that will have a tiled background on the
body. I want to use a png image in the content background as an oval-shaped
opacity mask over the body background. The side columns (and a propped footer
with clipped overflow) will have a partially opaque black background that will
match the edges of the .png mask.

The intention is to have a fixed dimension center area with a complex background
pattern that will fill any size browser window.

I can’t think how I would pull this off. margin:auto does not seem like it will
be sufficient for my background requirement and I don’t think I can add a
large fixed prop to the side-columns without losing my centering.

Here’s a rough mockup of the layout.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As per your screenshot you can write like this:

    body{
 background: url(image.jpg) repeat center center;
}

.container{
  width:500px;
  margin:0 auto;
}

    UPDATED:

    Solution according to your question Three column layout: fixed width center with fluid side columns

    http://jsfiddle.net/XMg2h/3/

    But it’s work in modern browsers

    UPDATED

    http://jsfiddle.net/XMg2h/10/

    it’s work in all browsers

    • 0