Saving Images for background use – need advice

[pghtech]

I am a beginner not only at web design but photoshop as well. Though I have made allot of progress I am still having a heck of a time figuring out the whole "save" image out of Photoshop for use in my website.

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 ?

[ThinkSoJoE]

theoretically, if you’re doing it right, you should be able to not worry about the monitor size, at least as far as your backgrounds in your container are concerned. If it were an issue of lining up your page background with your container background, then you would have a problem. Everything in your container should pretty much be safe from resizing should somebody with a different monitor size come and view your page, because in your CSS file, your container should be set to a specific width, thus causing everything else in that container to stay that width:

Code:

#container {
width: 760px;
}

Suppose the above is in your CSS, and in your HTML file you have your header, body, and footer elements all enclosed in <div id="container"> – your header, footer, and your body should all be "contained" within the 760px container. Anybody who views on a different resolution should still see those sections in a 760-pixel wide container. Even resizing through the browser will theoretically cause it all to grow together – at least that’s how it works for mine. I’m still a beginner around here though and I’m sure one of these other guys will have a better answer for you. Good luck!

[Historical Forums User]

it all depends on what the images in the header and footer look like. I’m going to assume they are rounded corners.

When it comes to saving images you have another option for transparency; PNG. The PNG format has an alpha channel and unlike GIF it is of a good quality. This would work for a majority of browsers . . . apart from IE6 and below.

I had the same problem and I didn’t come up with a great solution. In fact, im sure my old usability lecturer would shoot me. I took the computer snob attitude of ‘well if they have a crap browser….’ :geek:
I saved all my images with transparency’s as GIFs as well and then in my separate IE6 style sheet I changed the images to the GIFs. It looks pretty bad but its the best I could do.

Sorry I can’t be of more help!

<!–[if lte IE 6]>
According to the conditional comment this is Internet Explorer lower or equal to 6<br />
<![endif]–>

[ThinkSoJoE]

"pghtech" wrote:

Thanks for the reply.

However, it is my understanding that the <body> tag has to be the first element in the page content. So I am unsure how you would be able to put it inside the container?

What you mention as a problem is what I was trying to describe. That since page properties are not inside the container, trying to keep the page background aligned with the container Div’s background is the problem.

Basically my HTML looks like the following, but the backgrounds of the Header and footer divs in the container have part of the page background in it, and must align with the background in the body tag below which is outside the container. There has to be away to ensure that they will stay lined up – just like you can ensure that everything in the container will stay with itself:

<body>
background-image: url(……..somebackground.jpg);
<div id ="container">
<div id = "header">
background-image: url(……..somebackground.jpg);
</div>
<div id = "maincontent">
</div>
<div id = "footer">
background-image: url(……..somebackground.jpg);
</div>
</div>
</body>

What do I need to do so that the Header and Footer backgrounds will stay in alignment with the background in the body? If it was possible and done according to the previous recommendation to have the body part of the container, then the body would be limited to the width designated for the container (which is 800 in my case). So what would be governing the area outside the container?

You misunderstood me, though I suppose "body" wasn’t the best word to use in my analysis. "Content" would have probably been the better word to use in that context, but I digress. I assume you’re going for a similar thing to what Chris has done here on CSS-Tricks, where there’s the body background and then the content background. I’m working on something similar myself, and here’s a few excerpts from my style.css:

Code:

body {

background: url(images/background.jpg);

}

That will give you the background image for the entire page. You can use something like "background-attachment:fixed;" in there if you wanted to have the background not scroll with the rest of the document, which I’m pretty sure isn’t what you’re going for. Width and height tags sort of work (one of my sites has width:100%; height:100%; but it keeps the aspect ratio, it works for me though because of the nature of my background image).

Continuing on, I have all of my content on my page, including my header, main content, sidebar, and footer wrapped in <div id="page-wrap"> which looks like this in style.css:

Code:

#page-wrap {
width: 724px;
margin: 30px auto;
}

This limits the width of my content to 724 pixels, centers it, and drops it 30 pixels down from the top of the page. Notice there’s no background image listed in there? There’s a reason for that. My header image is contained in the background element of <div id="header">, and that image is 724 pixels wide. I also include a height element matching the height of the header image.

Depending on what you’re trying to do, this is where it gets tricky. The next thing on my list is my main content (if you’re following along with Chris’s videos, he also has a navigation bar, I skipped that in my current project). Because I have a content area and a sidebar, I wrap those two in <div id="container">, which also houses my main content background in my stylesheet, like so:

Code:

#container {

background: url(‘images/content-bg.jpg’) repeat-y;

}

If you’re not using a sidebar and are just having a content area there, you don’t need the container and you can put that background tag in your main-content section. I’m not going to get into floats and all that stuff here because Chris explained it pretty well in his video, but this might give you a basic idea to help you out. Put your footer div inside your page-wrap div, and you’re pretty much done.

After re-reading what you’re trying to do, I think your best bet is to try the page-wrap code I put up above and just play around with the margin to try and line up the body background and page-wrap background until you get it lined up right. Just make sure you test everything across different browsers and screen resolutions, what you’re going for sounds pretty tricky.

[Author]

Posts