-
1. Re: Liquid layout question
pziecina Apr 8, 2010 7:19 AM (in response to thersher)Hi
Do you mean the way I have done the header background image on this page - http://www.pziecina.com/holistic/index.php?
(resized on browser resize)
PZ
-
2. Re: Liquid layout question
thersher Apr 8, 2010 7:36 AM (in response to pziecina)No, it's a background image that goes all the way from the left edge of the screen to the right. It's not just a header, but a background.
-
3. Re: Liquid layout question
pziecina Apr 8, 2010 7:45 AM (in response to thersher)Hi
They are both done exactly the same, it is only a matter or where you place the closing </div>, but is this what you mean - http://www.pziecina.com/indexold.php.
PZ
-
4. Re: Liquid layout question
tsheridan Apr 8, 2010 8:28 AM (in response to pziecina)So your background image is in a div and then everything else in a div inside of that? How do I know what size to make the background image? Will the image resize itself smaller if I make it big? Thanks, this is exactly what I've been looking for!
-
5. Re: Liquid layout question
tsheridan Apr 8, 2010 8:34 AM (in response to pziecina)I just looked at your bg image, and it's smaller. So the bg images will resize bigger or smaller depending on the screen resolution?
-
6. Re: Liquid layout question
pziecina Apr 8, 2010 8:42 AM (in response to tsheridan)Hi
So your background image is in a div and then everything else in a div inside of that?
Exactly, you must make certain that you give the image a width and height of 100% in your css and not in the image tag which should have no height or width attributes.
As for the image size itself, this is a judgement call for the designer/developer as you must make the image a size that will not deteriorate in quality when the image is 'enlarged' this is why I decided only to use this on 'header' images and other smaller items. If the image/browser is smaller than the image then the image will resize to the smaller dimension automatically.
There is also another drawback to this effect in that the image will distort to fit 'unusual' browser sizes, another reason why I only use it in 'headers' etc. as I can set a min/max width/height for the element, something that cannot be done when it is used as a background for the entire browser/page.
PZ
-
7. Re: Liquid layout question
JoeyD1978 Apr 8, 2010 12:14 PM (in response to thersher)None of the websites you cite as examples are doing anything complicated. They're all fixed width designs (not fluid) with a large
background image.
Here's the body background image from Macallan:
http://macallanridge.com/images/site/bg-forest.jpg
They're simply centering it in the body tag, and then building the site in a centered, fixed-width div.
The body CSS is done as so:
body {
background: #141515 url(../images/site/bg-forest.jpg) no-repeat fixed center top;
color: #4f401c;
}
This is a simple and commonly used method these days, you need not worry about fluid width designs (they suck) or any of methods you're exploring above. -
8. Re: Liquid layout question
tsheridan Apr 8, 2010 2:57 PM (in response to JoeyD1978)If they're all fixed width, how then is the background image resizing itself to accomodate different screen resolutions? I tried the fixed width, top-center thing and it didn't work. Is the image just that huge? I noticed that this one was 1800 px wide.
-
9. Re: Liquid layout question
JoeyD1978 Apr 9, 2010 5:41 AM (in response to tsheridan)The images aren't resizing at all, they're moving left or right when you resize the browser to stay centered in the body, just like you're telling them to do with the CSS.
For example, look at the background for Barack Obama's website:
http://www.barackobama.com/images/bgv5.jpg (1332px wide)
They use the exact same technique of centering the background image in the body tag, and then centering a DIV wrapper to line-up in the middle of background. It's pretty easy to tell with this example how they're using the technique. This day and age it's quite acceptable to use beefy background images, though I still try to keep it to 100K or less for the poor souls stuck on dial-up.



