CODEWITHSUNDEEP
cssdebuggingpositioning
Brian
Brian

Reputation: 3958

CSS: Possible to do position:fixed offset center div?

First of all, have a look at this example of the layout I'm trying to achieve (below)

enter image description here

Basically, I have a standard center div (gray) with the typical margin: 0 auto. My problem is that I have a background image (on the white overflow area) that is <div id="stripes"> with the following CSS

background: url(foo) top center repeat;
position: fixed;
width: 100%;
height: 100%;

This background is applied BELOW the HTML level of the document to the #stripes div.

What I'm having trouble with is setting up the red div below. The plan is for it to stay visible at all times via position: fixed however, I can't use % based right: xx%; top: 0 because the pattern must line up with the striped pattern, so a few pixels offset will create a visible and obvious "seam" on the page.

Here is a look at the effect with the stripes included:

enter image description here

Upvotes: 0

Views: 1707

Answers (1)

Brian
Brian

Reputation: 3958

The way I ended up solving this was to create two divs. On the top layer, I used a standaard width: 960px; margin: 0 auto div and then at the end of the document I created another div with the same styles meant to act as a container for the photo (red div above). Inside of the second div I nested a <div id="photo_bg"> div. This div used the following styles:

#photo_bg{
background: url(foo.jpg) top right no-repeat;
overflow: visible;
position: fixed;
right: 50%;
top: 0;
width: 1014px;
z-index: 2;
}

the parent div was called #stripes

#stripes {
    background: url("images/bg_striped_repeat.jpg") repeat scroll center top transparent;
    height: 9999px;
    left: 0;
    overflow: visible;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}

Upvotes: 1

Related Questions