CODEWITHSUNDEEP
htmlcss
DJ180
DJ180

Reputation: 19854

Positioning content of div independent of child divs

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

Upvotes: 0

Views: 232

Answers (3)

Last Rose Studios
Last Rose Studios

Reputation: 2481

Not sure I fully understand what you want to do, but I think something like this would help

#background div {background-image:url(image.jpg);
#area1{background-position: left top}
#area2{background-position: center top}
#area3{background-position: right top}

Upvotes: 1

Brian L
Brian L

Reputation: 3251

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;
}

Upvotes: 0

James Khoury
James Khoury

Reputation: 22319

use the css property background-position: Codertools.com / sitepoint.com

e.g.:

background-position: 50px 100px;

Upvotes: 0

Related Questions