Multiple backgrounds: most practical choice?

Forum Moderators: not2easy

Message Too Old, No Replies

Multiple backgrounds: most practical choice?

...is multple repeat-y possible?

myrrh

5:21 am on Mar 4, 2012 (gmt 0)

I currently have my background as a 1px high image set to repeat-y.

I want to add a different image to the top and bottom so that they display as horizontal bands 150px high.

I've tried to find out how to do this but cannot find anything that explains how (and if it's possible) to have multiple repeat-y images. I know I could just make the top and bottom images 150px high, but I didn't think that was the best way to do it.

What is the most practical way to achieve this?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

lucy24

6:58 am on Mar 4, 2012 (gmt 0)

I know I could just make the top and bottom images 150px high, but I didn't think that was the best way to do it.

Well, that's definitely the first answer that comes to mind. Can you explain what the problem is?

Keep in mind that you can set the starting point for a repeating image. So if it's important not to chop the 150px image in the middle, position it at the top rather than vertically centered.

To double-check: You're talking about alternating images, in stripes, right? Not layered backgrounds where you have a 150-px repeat sitting on top of a 1-px repeat? One simple way to achieve that would be to make a div as big as the whole body, and assign a background to each, making the upper layer partly transparent so the lower layer shows through.

myrrh

1:45 pm on Mar 4, 2012 (gmt 0)

I know I could just make the top and bottom images 150px high, but I didn't think that was the best way to do it.
Well, that's definitely the first answer that comes to mind. Can you explain what the problem is?

By "problem" do you mean why I said I didn't think that was the best way to do it? If so, I said that because I thought I was desirable to keep images' file sizes as small as possible for faster page loading.

Keep in mind that you can set the starting point for a repeating image. So if it's important not to chop the 150px image in the middle, position it at the top rather than vertically centered.

Then how do I limit the top repeat-y image to 150px so the main background is visible?

To double-check: You're talking about alternating images, in stripes, right? Not layered backgrounds where you have a 150-px repeat sitting on top of a 1-px repeat?

No, not alternating stripes.

I want an image 150px high at the top to span the entire width of the browser window, whatever the user's resolution may be. This image can originate as 1px high as it is only a background design.

Then the main background of the page will be below that. It too needs to be a y-repeating image because it's a gradient design.

Then at the bottom, another 150px high image (or possibly greater in height as it will be the footer and contain typical footer content such as nav links, contact info, icons for Facebook and Twitter, etc.) - possibly the same image as the top or possibly a different image - again, something that can originate as a 1px high image and set to repeat-y.

lucy24

9:05 pm on Mar 4, 2012 (gmt 0)

Oh, oops. You want to divide the page into three pieces. This is not a problem. The easiest way is to make one background for the whole page, and then make headers and footers with their own background(s). If the header and footer backgrounds are non-transparent, it doesn't matter if there's another background behind them.

Now all you have to deal with is the vexed "sticky footer" issue if there is any possibility that your body can ever be shorter than a user's browser window.

myrrh

9:23 pm on Mar 4, 2012 (gmt 0)

The easiest way is to make one background for the whole page, and then make headers and footers with their own background(s)

Yes, that is what I am trying to do. My question was how? (the header and footer images are not transparent)

lucy24

4:10 am on Mar 5, 2012 (gmt 0)

The header is easy. You just define a div with explicit height in pixels or ems or whatever you need it to be. No top or side margins unless you want the overall background to show around the edges. Use padding if there's content that you want to keep away from the edge of the screen.

By default the first thing on any page-- div, paragraph, table, whatever it is-- will go at the top of the page and will take up the full width. So that takes care of itself. You set its background image exactly the same way you set it for the body. It sounds as if you already know how to do that.

The footer will depend on how tall your page is. If your page content is long enough that you don't have to worry about running out of content before you run out of page, you've got it made. Again, just put your footer div (called by whatever name you want) after everything else.

Now, if your page content is-- or might be-- very short, then you need to force the footer down to the bottom. Do a Forums search for "sticky footer". Most methods will work on 9 out of 10 browsers, but it's never the same 9. I just say
html {min-height: 100%;}
and the heck with it, but this isn't foolproof.

myrrh

3:41 am on Mar 7, 2012 (gmt 0)

I tried this and the resulting header expands with the content (no content, no header):

#header {
background-image:url (http://www.example.org/images/header.gif);
background-position: top center;
background-size: 1140px 156px;
}

<body>
<div id="header">
header content here
</div>

How do I get the image to stick to 156px high?

One more question:

Is it okay to have the header and footer images full size as opposed to 1px high and use repeat-x (for the sake of making the file size as small as possible)?

lucy24

5:54 am on Mar 7, 2012 (gmt 0)

You have to assign the size to the header itself, not to its background. By default, the background will use its own size-- that is, the natural size of the image. And because it's background rather than foreground, it will be cropped if it's too big.

Not sure what you mean by the second question. How big is the image? What's it a picture of? If it's meant to repeat, it should be made as small as possible: generally just one iteration each way.

myrrh

11:21 am on Mar 7, 2012 (gmt 0)

Not sure what you mean by the second question. How big is the image? What's it a picture of? If it's meant to repeat, it should be made as small as possible: generally just one iteration each way.

It's not a picture. It's a gradient background image. I was mistaken when I wrote use repeat-x, I meant repeat-y. It theoretically can be 1px high, but it needs to be 1140px wide because of the direction in which it is a gradient.

lucy24

12:24 pm on Mar 7, 2012 (gmt 0)

Yes, you confused me by mistyping "repeat-x". The only way I could get that to work was with a solid color and then it made no sense to talk about images :)

If it's a gradient that only changes in one direction, then making it 1px high is definitely the way to go. It does make editing a little tricky because you can't really see it. I mean editing the image itself, not the page it lives on.

You could experiment a little and see how much the filesize changes as you go from 1 to 2 to 4px high. It will get bigger but it won't be 4 times as big. Also be sure to try both png and jpg; sometimes there's a really big difference between formats, depending on what type of image it is. For a gradient, you're probably best off with jpg, but you can compress it a lot since it's meant to be fuzzy anyway.

myrrh

3:04 pm on Mar 8, 2012 (gmt 0)

I got the header to work.

I'm having trouble with the footer - it ends up just below the header. I followed your suggestion and read a number of threads on sticky footer. Many threads were long and offered complicated solutions - I tried:

* html #footer{height:100%}

...which many people/threads referred to. It did not work. I tried your:

html {min-height: 100%;}

...it did not work but I wasn't sure if I was using the proper syntax. Here is the code I was trying those two with (among others):

#footer {
background-image: url(http://www.example.org/test/images/footer_taupe.jpg);
background-position: center bottom;
height: 136px;
padding:10px;
}

<div id="footer">
footer content here
</div>
</body>

Can you tell from that what I've done wrong?

I've spent A LOT of time trying to learn and troubleshoot this myself, including going through the entire
W3Schools tutorials at least three times. What I'm saying is I'm doing my best to learn the "why" in addition to
the "how" and I'm not just trying to get you to do the work for me.

I very much appreciate the time you have taken to help.

lucy24

2:18 am on Mar 9, 2012 (gmt 0)

The big question is: what's between the header and footer? If there's always going to be a whole lot of content, you don't need to agonize over the footer. Forcing the footer to the bottom is only a problem when some pages have only a little bit of text, so you end up with a footer hanging forlornly in the middle of the page.

Is there is any danger that you will run out of text before you run out of page? In the real site, that is, not when you're testing. Don't spend a lot of time solving problems that will never arise.

:: wandering off to experiment while looking vaguely around for all those Sticky Footer gurus ::

myrrh

4:04 am on Mar 9, 2012 (gmt 0)

If there's always going to be a whole lot of content, you don't need to agonize over the footer.

I guess I'm agonizing over the footer because on my test page I have plenty of content and the footer still appears about 20px below the header.

This may be irrelevant, but it's a two-column layout. On the left is a block for the nav menu. On the right is a block for an image (a photo) and below that is a separate block with text. All three blocks have sample text in them as content.

lucy24

6:51 am on Mar 9, 2012 (gmt 0)

I have plenty of content and the footer still appears about 20px below the header.

Uh-oh, that sounds as if it's simply being planted in the wrong place. Or it's overconstrained. Something coming through as absolute that should be relative, that kind of thing. Does it cover the page content, or does it interrupt it? Apart from being in the wrong place, does it otherwise look as intended? ("Apart from that, Mrs Lincoln...")

Better post the footer css. And the relevant part of the html that calls it.

I hesitate to say this because people tend to dump their entire style sheet, on the off chance that there's some connection between the header color in the navigation links and the footer placement at the opposite end of the page. Or something like that ;)

myrrh

12:52 pm on Mar 9, 2012 (gmt 0)

...sounds as if it's simply being planted in the wrong place. Or it's overconstrained.

I've considered that and looked at everything - but I'm probably missing something.

Does it cover the page content, or does it interrupt it? Apart from being in the wrong place, does it otherwise look as intended? ("Apart from that, Mrs Lincoln...")

My kind of humour. It does look as intended and it does not interrupt the page content. It is either behind or in front of the page content depending on what I've tried with the CSS.

Better post the footer css. And the relevant part of the html that calls it.

#footer {
background-image: url(http://www.example.org/test/images/footer_taupe.jpg);
background-position: center bottom;
height: 136px;
padding:10px;
}

<div id="footer">
footer content here
</div>
</body>

...some connection between the header color in the navigation...;)

#nav {
color: kind-of-off-white-with-a-hint-of-chartreuse;
}
;)

lucy24

10:02 pm on Mar 10, 2012 (gmt 0)

Ooh, this is maddening.

I'm picturing an overall structure that goes like this:

<body> + css with overall background-image
<header> + css, ditto
some stuff here
</header>
<uber-div>
whose sole purpose is to contain the left and right sides and make them come out even
<leftside>
buncha stuff here
</leftside>
<rightside>
more stuff here
</rightside>
</uber-div>
<footer> + css including background-image
some stuff here
</footer>
</body>

Is that the general layout?

By this time, a lot of people would have said, Oh, ### it, I'll just use a table ;)

alt131

10:20 am on Mar 11, 2012 (gmt 0)

ooooo ... "t" word alert ... this is what happens when you stop the haddock-slapping and start with magenta/cyan colour schemes ;)

Myrrh, you always ask interesting questions, and you and Lucy have been progressing through this one, but I wonder if it would help to pause and consider where you've come from.

To answer your question, yes it is possible to set multiple background-images on the same element. See
3.3. Image Sources: the �background-image� property [w3.org] for more detail. However, this is only supported by the most modern versions see quirksmode [quirksmode.org] so not so helpful at this stage.

However, as I understand it, what you really want is a different background for the page, header and footer which is not the same as setting multiple backgrounds on the same element. For different images, the most practical solution will be the one that delivers the desired result with the least complicated code, smallest file-sizes and least server hits. Again css3 provides non-image based options for gradients, but support is sketchy and I've found them to be so slow that a 1px repeating image is likely to be faster.

I think useful to separate the issue of background-images from the issue of the footer layout. Again, as I understand the thread, you've figured how to set the background-images for each element which resolves that. That takes us to layout, and Lucy's suggested document structure is roughly correct, then I expect the footer is "hanging" about 20px below the header because the elements in between are floated or positioned. Given the references to the footer being above/below the content, I'm with Lucy that positioning is a likely suspect.

Finally, are you sure you want a sticky footer? That's a footer that sticks to the bottom of the viewport if there is very little content, but slides down to the bottom of the page if the content extends below the fold. Unless you really want the sticky part you just need an ordinary footer, which needs a different approach. I realise you've already done a lot of reading, and I imagine you've come across lots of conflicting explanations as well, but Paul_o_b has some really readable posts on sticky footer issues, plus working code samples. I think these three are the most relevant here - ignore the thread titles, just look for Paul's posts, especially the last which contains a basic page structure that should get you going.
[webmasterworld.com...]
[webmasterworld.com...]
[webmasterworld.com...]