homepage Welcome to WebmasterWorld Guest from 54.237.151.188
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Large back ground image and cross browser positioning
djmokoia

5+ Year Member



 
Msg#: 3791471 posted 4:42 pm on Nov 21, 2008 (gmt 0)

Hi

I've been asked to build a site based on some designs that have been put together by a client and a graphic designer.

The site only consists of a few pages and from a web design point of view the design is very poor eg text on the far right of the page, no room for navigation links, etc but it does look pretty! Unfortunately, despite my attempts to tell the client that the design is likely to make the site extremely user unfriendly they are adamant that it must look like this.

Each page consists of a large background image, with other elements layered on top, including other images that need to be positioned quite precisely in relation to the background image. Of course I am having trouble as the images are not appearing in the same places in different browsers and I need to understand how to overcome this.

I am setting the background image as a background image of a container element rather than the body of the page to allow it to be centred depending on the screen resolution, aiming at a minimum width of 1280.

I've not had to deal with an issue such as this before as I would personally never use a background image in such a fashion when building a site.

Any suggestions or pointers of where to look would be much appreciated.

thanks
Tim

 

alias

10+ Year Member



 
Msg#: 3791471 posted 8:15 pm on Nov 21, 2008 (gmt 0)

center the background on the <body>, that's the only way to make it expandable without being bound to the minimum container width.

you should be able to position other related elements using both relative and absolute positioning (position:relative is required on the parent for the position:absolute to work properly on the direct children).

hope it helps.

djmokoia

5+ Year Member



 
Msg#: 3791471 posted 8:51 pm on Nov 21, 2008 (gmt 0)

I'm not sure I fully understand you. How can I centre the image if it is a property of the body tag?
I don't want the image to resize because if it does then the position of the elements will change as it resizes surely?

Perhaps I haven't explained the situation properly. Imagine the background image is a house with the details (windows, etc) removed. The elements I want to overlay are the doors, windows, etc. Simply using relative and absolute positioning means the doors and windows will not be in the same places when viewed in different browsers...

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3791471 posted 11:41 pm on Nov 21, 2008 (gmt 0)

something like:

body {
background-image: url(house.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position: top center;
}

Would center your image on the background, showing the center part of the huse even if the viewport is smaller than the house.

So how do you position stuff over this ?
absolute positioning is your friend:


#door {
position: absolute;
height: 300px;
width: 150px;
top: 400px;
left: 50%;
margin-left: -75px /* half of the width */
background-color: red; /* or something more useful */
}

would put a door in the middle.

Yeah nice I hear, but how do I put a window 200px more to the right and left?


#window1 {
position: absolute;
height: 100px;
width: 100px;
top: 400px;
left: 50%;
margin-left: -375 px /* how far from the center to the left */
background-color: red; /* or something more useful */
}
#window2 {
position: absolute;
height: 100px;
width: 100px;
top: 400px;
left: 50%;
margin-left: 275 px /* how far from the center to the left */
}

The elements to put in it: just drop them in the html in any order.

Starts with a reset of padding and margins and it'll all fit in the same spot.


* {
padding:0;
margin:0;
}

djmokoia

5+ Year Member



 
Msg#: 3791471 posted 7:49 pm on Dec 3, 2008 (gmt 0)

Thanks for your help, that has certainly helped with locating the background image however I still have some issues with placing the images over the top.

Perhaps my analogy of a house was misleading, it's more like the background image is a street map and the overlaying images are particular locations.

The issue I'm having is that particular locations are correct in relation to a street in Firefox but not correct in IE (or vice versa).

I'm not sure I understand the use of margin-left. Why is this necessary? Is it better the use % for top and left and then adjust with margin-? rather than using px for top and left?

Lastly I don't understand whereabouts to put this:

* {
padding:0;
margin:0;
}

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3791471 posted 2:00 am on Dec 4, 2008 (gmt 0)

Let's start with

Lastly I don't understand whereabouts to put this:

* {
padding:0;
margin:0;
}


That's a reset of all browser default margins and paddings (they should not be there on divs, but will be on lots of other things (body, p, li, ul, ...) and will not be consistent across browsers.
The reset is used to level the playing field and get control.


I'm not sure I understand the use of margin-left. Why is this necessary? Is it better the use % for top and left and then adjust with margin-? rather than using px for top and left?

The example I gave above used a background that was centered horizontally.

The trick used is to know that left:50% is in the middle of the page. Now to position something e.g. in the center, I use a margin-left:-Xpx with X=half the width of the element I'm positioning.

Now add more of less on that margin and you can move things about as you please.

Basically it's a poor-man's version of math: I'd rather have left:(50%-75px);, but that's not possible, so ...

The issue I'm having is that particular locations are correct in relation to a street in Firefox but not correct in IE (or vice versa).

How much is IE off ? just a few pixels ? If that's the case: IE is bad at math (some call it rounding errors). The problem with these rounding errors is that they depend on the exact size of the viewport (try to make your browser 1 pixel taller/more narrow and it flops on and off)

Make sure your images tolerate this one pixel off positioning, as I know of no fix whatsoever for this.

Do you have a simple example you can post code to show the difference you get ?

If it's more than just a pixel, you can try to use conditional comments and just put it where you need it for IE independently from all the other browsers (IE just is weird at times, you can spend lots of hours trying to figure it out, or just fix the result to look nice enough not caring what the bug is).

djmokoia

5+ Year Member



 
Msg#: 3791471 posted 5:20 pm on Dec 6, 2008 (gmt 0)

Thanks. Actually, having posted my previous response I then had a proper play around with it and figured out what I needed to do, based on your original answer.

The info you have provided has been extremely useful and I think I've got to a point where I can locate the images successfully, the slight difference between browsers is tolerable.

thanks again

djmokoia

5+ Year Member



 
Msg#: 3791471 posted 12:52 pm on Feb 25, 2009 (gmt 0)

I managed to get this working correctly based on the above advice. However, if I change my monitor resolution to 1024x768 (it's normally 1280x800) it displays very differently firefox compared to IE.

Let's say I have an image that is 1150 x 707 in size set as the background using the following css:

body {
background-image: url(images/backround-image.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center;
padding:0;
margin:0;
}

in firefox in 1024x768 the background image starts in the immediate top left corner of the screen whereas in IE there's a gap on the left (but not the top) before the image starts.
In firefox the position of the images that are overlaid is incorrect in relation to the background when I change the resolution. In IE they stay in the correct positions (relative to the background).
I have used absolute positioning and % values to position the overlaid images and over items.

Any suggestions?

djmokoia

5+ Year Member



 
Msg#: 3791471 posted 3:03 pm on Mar 4, 2009 (gmt 0)

No one have any suggestions on this?
Can someone please explain to me why the position of the images is changing in Firefox when I change my screen resolution? I am somewhat stumped on this and would appreciate any pointers in the right direction

Thanks

djmokoia

5+ Year Member



 
Msg#: 3791471 posted 4:50 pm on Mar 4, 2009 (gmt 0)

no worries, fixed it

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved