Home/ Questions/Q 6704235
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T07:15:56+00:00

Consider this example html: <body> <div id=background> <div id=area1>…..</div> <div id=area2>…..</div> <div id=area3>…..</div> </div>

  • 0

Consider this example html:

<body>
<div id="background">
        <div id="area1">.....</div>
        <div id="area2">.....</div>
        <div id="area3">.....</div>
    </div>
</body>

I have my area1, area2 and area3 divs all positioned where I want them using Twitter’s bootstrap helper library.

I now want to place a background picture behind all these. However, I want the background image to placed at a specific location. So I’ve set my css for background with the URL of my image. The image only takes up the space that the 3 divs below occupy.

If I change the positioning of the background div, then the other 3 areas move with it.

Therefore, I’m wondering, how can I position my background image in a specific location, without altering the other divs positioning?

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Don’t move the div – change the position of the background picture using background-position. You can specify precisely the position in pixels (x y), percentage points(x% y%), or anchor it by the top/middle/bottom and left/center/right points. For example:

    #background {
  background-image: url('cat.jpg');
  background-position: center top;
}
    • 0