problem with left and right background image position

[fwed]

Hi, I'm having trouble with the position of background images I have added on the left and right side of my website.
It fits well with a 1152x864 screen resolution, but will overlap with any other resolution.

I went through many posts on this forum, and I know that the solution would be either on the css or in my tpl_main_page.php file, but I have tried many many things, and none did succeed !

Could please anyone have a look at my site (still under construction) : http://www.naiah.fr/shop/
and tell me what would be wrong ?

Fred

[gjh42]

You have your #flowersleft and #flowersright divs absolutely positioned with respect to the left edge, but you have #mainWrapper positioned with margin: auto; so that it will always be centered in the screen.

This can inherently only work with one screen width. Position #flowersright with respect to the right edge, and try a percent instead of static pixel distance for both of them. Finally, give #mainWrapper a position: relative; (without specifying any shift) and a z-index: 100; so it will overlap the flowers decorations on smaller screens instead of the flowers covering the content.

[fwed]

This can inherently only work with one screen width. Position #flowersright with respect to the right edge, and try a percent instead of static pixel distance for both of them. Finally, give #mainWrapper a position: relative; (without specifying any shift) and a z-index: 100; so it will overlap the flowers decorations on smaller screens instead of the flowers covering the content.

ok, thanks a lot for your prompt reply . find hereafter my modifications on the css :


#navMainWrapper {
margin: 0em;
margin-bottom: 0px;
height: 26px;
font-weight: bold;
color: #ffffff;
padding: 15px;
background-image: url(../images/nav_cat_bg.gif);
background-repeat: no-repeat;
overflow: auto; /* Added for Firefox for screen shift */
position:relative;
z-index: 100
}

#flowersleft {
background:url(../images/bg_flowers_left.png);
width:88px;
height:380px;
position:absolute;
left:7%;

}
#flowersright {
background:url(../images/bg_flowers_right.png);
width:88px;
height:380px;
position:absolute;
left:85%;
}

I have also modified this :
#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
margin: auto;
position:relative;
z-index: 100
}

so, it looks better than earlier, but still, i'm trying to get something like http://www.miserylovesco.ca/

[gjh42]

#flowersright {
background:url(../images/bg_flowers_right.png);
width:88px;
height:380px;
position:absolute;
right: 7%;
}

Also, when adding a property to #mainWrapper, add it to the individual #mainWrapper declaration. Adding it to the group declaration gives the same property to all of #navColumnOneWrapper, #navColumnTwoWrapper and #mainWrapper; this probably won't make a difference here, but it often will mess something up. If there were no other #mainWrapper declaration, you should separate this one from the other two:

#navColumnOneWrapper, #navColumnTwoWrapper {
margin: auto;
}

#mainWrapper {
margin: auto;
position:relative;
z-index: 100
}

but since there already is one at the top of the /*wrappers*/ area, just put all its properties there.

Not sure why you changed #navMainWrapper, as this should not be necessary for this purpose.

[fwed]

ok, thanks for your explanations and your corrections. I'm not very comfortable with css yet (i will attend a training session on css next october).

And for higher screen resolutions (>1200x800), I suppose I should get a wider png file and modify the css, correct ?

Fred

[gjh42]

The point of my suggestions was to make the layout adaptable to any screen resolution without further modifications. The flowers will stretch out farther on larger screens.

I looked at your example site and it appears the desired effect is to have the flowers always tight to the mainWrapper. They have a slightly different approach and I'm not entirely sure how it works. I would have to poke around and experiment some.

[spectreman]

I'm trying to figure this out....

i want to add images to the right and left of my store, but i'm a little stumped.

looking at the css for http://www.naiah.fr/shop/

i see:

#flowersleft {
background:url(../images/myimagesL.png);
width:250px;
height:440px;
position:absolute;
left:4%;

}
#flowersright {
background:url(../images/myimagesR.png);
width:250px;
height:440px;
position:absolute;
right:4%;
}

i understand how it's calling the images, but if i copy the above to my css, the images don't show - what other PHP code do i need to change so the images show up?