Forum Moderators: not2easy
To get to the thick of it, the problem I seem to keep facing is two fold and might not be a photohop-saving issue and more of a lack of CSS knowledge. My problem is either keeping the body background lined up with div backgrounds OR saving backgrounds as GIF's, giving them transparency, and loosing significant image quality.
THe situation: For my body I have a background with a few veritical lines. My container has a header and footer that has the background running through elements in it. So I can either save the header and footer backgrounds as Jpeg's with high quality and line up the body background stripes with the header/footer background stripes.
OR
I can save the header/footer backgrounds as GIF's w/ transparency and let the body background show through.
I run into problems with either scenario.
If I save the header/footer background with the body background in it as JPEG - then if I understand CSS, I will have a problem KEEPING the vertical stripes lined up in the header/footer DIVS and the body background when someone views with a different screen size than what I am using. The only way I know to keep them lined up is for example making a div that is position: absolute to the container. But again, since I want these vertical lines to run from the top of the page down infinitely, the vertical height would have to be enormous (e.g. 4000px +) high to try and account for most monitor resolutions, which doesn't sound right. There has to be a better way.
But if I try to bypass this alignment issue, and save the header/footer backgrounds without the body background in them and as GIF's to be transparent so the body background shows through, the quality of the image is degrade to much. Same with PNG 8 it appears. For example, some of the elements in the header/footer images have a drop shadow, it becomes atrocious looking.
I am thinking there has to be a way to keep the body background lined up with the header/footer images and if someones resolutions on their monitor changes it won't throw it out of alignment.
How do I do that ?
As for CSS you cant (yet) resize background images, but you can position them relative to their container and you can repeat them horizontally (repeat-x) or vertically (repeat-y). Some more reading here CSS colours and backgrounds [w3.org]
Little example of positioning.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Little example of positioning</title>
<style type="text/css">
div {background:url(yourimage.jpg) -200px -200px no-repeat; height:300px;width:300px; border:2px solid #000; }
</style>
</head>
<body>
<div> </div>
</body>
</html>
I am not seeing how that helps my alignment issue.
The problem I am having is that the use of a container helps keep everything in the container together. But my problem is that the page/body is outside the container (unless someone can tell me how to "attach" the body to the container so that it is positioned relative to the container). But I don't think this is possible.
So the header and footer div's inside my container div, must align with the page/body background and stay no matter what resolution..ect people are using.
What I want to do:
- for my container div to be positioned in the middle of the page (easy to do with margin: 0 auto;
- the background of the header div and footer div to align with the body/page background no matter the viewers resolution/size/settings.
Giving you the example I did was to show you how a background image can be positioned within a div. It doesn't have to be attatched to the body.
Anyhoo.
Positioning the image/div? in the center of the page using 'margin:0 auto;' won't (as you already know) work. The reason being that if the window is 600px then the center is 300px and 800px window is 400px center. And as I said previously there isn't a way to resize a background image.(its comming soon CSS3)
Now your background image, I assume is some fixed width lets say its 1024px so the center of that image is 512px.
Now As I understand you want to have a (not sure if its another image or a div , meh ill go with div) div centered on that background. And Im assuming you want it centered both sides.
Right we are going to have to know the width of this div, you will see why in a bit, lets say its 600px.
Now we want to position this div in the center of the page. CSS has a method for that its called 'position'. (more horrid reading
CSS positioning [w3.org]).
From that nice reading we decided 'position:absolute' is what we want. and it also says "The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties."
Hmm so we can't just say center at 512px.
ok we can say
div {
position:absolute;
width:600px;
left:212px; /*(1024-600) / 2 = 212*/
top:100px; /* How far from the top of the window*/
}
And in handy take home form.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {background:url(bgj.gif) no-repeat;} /*this image has a width of 1024px*/
div {
position:absolute;
width:600px;
left:212px; /*(1024-600) / 2 = 212*/
top:100px; /* How far from the top of the window*/
border:1px solid red;
}
</style>
</head>
<body>
<div><h1>ullooo</h1></div>
</body>
</html>
But what if the resolution is 800x640px, well they have to scroll and what about 1280x1024,well they some nice white bits on the right.
Oh OK how about
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {font-size:100%;}
#page {position:absolute; top:0;left:0; z-index:1;}
img {width:64em;}
#content {
position:absolute;
z-index:2;
width:37.5em;
left:13.25em;
top:200px;
border:1px solid red;
}
</style>
</head>
<body>
<div id="page"><img src="bgj.gif">
<div id="content"><h1>ullooo</h1><p>Change the font size CTL++ or CTRL-- in firefox. [View] [Textsize] in IE</div>
</div>
</body>
</html>
But what about DPI
bye bye ;)
I think I might have found the answer. (Thanks to firebug) I can set the container to 100% width, inherited from body, then set all the container divs to margin: 0 auto; and put the main background in the container and align it with the header and footer backgrounds to ensure they stay lined up!
