3 Piece image background repeater

HTML & CSS
1

Hello All!

For a client there is a request for a page that contains three different background pieces. One background for the header,one background for the middle (main content area), and one background for the footer. The three pieces all need to line up perfectly (vertically stacked). Each of the three peices/images takes up the entire width of the fixed page, so it as though the three pieces are stacked vertically.

The issue I am having comes up when the height of the content is taller then the middle area background image. The middle image is designed to be able to repeat many times, however if the background image doesn’t repeat exactly by a whole number (aka the image has to repeat at least 1, 2, 3, etc. times, not 1.25 times, or 1.75 times) the background will not align correctly. This is the issue as I can’t find a solution of how to make sure the content will only expand by a full height of the middle background image.

Here is an example of what the markup could be (but would probably need to be changed to have a solution work)


<div id="header"></div>
<div id="middle"></div>
<div id="footer"></div>



#header {background: transparent url('bg_header.jpg') no-repeat left top; }
#middle {background: transparent url('bg_middle.jpg') repeat-y left top; }
#footer {background: transparent url('bg_footer.jpg') no-repeat left top; }

CSS only methods are preferred. Trying to avoid using JS to do this as much as possible. So far I’ve looked into solutions such as sticky footer( http://ryanfait.com/sticky-footer/ ) and sliding doors ([URL=“http://www.alistapart.com/articles/slidingdoors/”]http://www.alistapart.com/articles/slidingdoors/ ) techniques but haven’t been able to find a solution yet.

Attached is an example of the image assets that are being given. Notice how the middle backgrounds can be repeated, but only by the ENTIRE height of the image.

Any help or insight on the solution is GREATLY appreciated, THANK YOU IN ADVANCE!!!

2

Google “css Vertically Liquid Box”

3

Unfortunately the vertical liquid box solution seems (at least to me) to be very similar to the sliding doors solution. As a stand alone technique I don’t see this working as a solution D:

The middle container can ONLY repeat in increments of the height middle image. Does that make sense?

Thanks again!

4

Sorry it doesn’t make much sense to me. The repeating image will simply go to the bottom regardless. Try your hand at this code http://www.visibilityinherit.com/code/vertically-liquid-round-corner-box.php

5

I THOUGHT that was the issue, but I wasn’t sure. This might be a case in which you could use the LBx as a fall back for older browsers. For UAs with CSS3 you could use the border-image property set to “round”, the source image begin ONLY the .middle tile. It may take a few to get the hang of it… but it is a really powerful and useful property. Be warned it still considered “spec”.

6

Yeah that was exactly the page I got to haha. Maybe I’m not seeing it correctly but the image in that example that is repeating has the same vertical pixels all the way down (on the left side for example is a black line that goes all the way down the image). So if you were to see one pixel of that image or if you were to see 500px of that image, it would look the same regardless. My image (please look at the attached psd on the original post) is NOT the same all the way through and because of that needs to “wrap”. A portion of the image that is to repeated can NOT be shown, only the ENTIRE image can be shown.

If only a PIECE of the image is shown it will show incorrectly. Does that help to make sense? Please look at the attached PSD, I think that will clarify my poor excuse for an explanation. :smiley:

Thanks!

7

Ahh ok I see. The image is still pending approval. I’ll wait. Or you could upload it and give the link.

8

Dang, unfortunately I don’t have access to a public server right now. I’m a forum noob, how long do you think it should take to get approval of the psd?

9

Hi,

CSS3 has an anwser for this but very poor browser support at the moment.

Your best bet is to use a script to resize the background to an even repeat height.

Or you could use background-size to scale the image over the whole background and is supported in IE9+ other modern browsers.

10

Wow, IE9 has better support for this than Chrome or Firefox. Somebody in Redmond got the memo. Now if they could make their browser upgrades work on all versions of their OS so people can upgrade without having to buy a whole new OS, gee that would be great.

11

CSS3 has an anwser for this but very poor browser support at the moment.

This is why I suggested the more broadly supported border-image property and some PS slight of hand( tho it’s still CSS3, farm more browsers implement it).

12

Yes, I only suggested it because of its IE9 and 10 support which border images doesn’t have in IE9 (and support is unknown in IE10). You could use conditional comments for IE9 to supply the effect via this property instead and hope that IE10 will support border-image as CCs are dropped in IE10.

13

You could possibly trick it into working by making your line-height a fixed multiple of the image – therin no matter how many ‘lines’ there are, it always fits. This would likely mean using px metric fonts and line-heights, making the entire page an accessibility train wreck.

Which is why I generally consider such background images non-viable for web deployment. You should probably have told the client that at the start… Of course, if you’re playing with graphics before you even have semantic markup and a layout in CSS, the whole process is IMHO being done backwards.

A lot of times clients come up with this “but I can do it in photoshop” nonsense, and you have to tell them “the web isn’t photoshop”.

14

That’s a good idea and would work as long as the repeat wasn’t too high but also means that margins would need also need to be consistent also.

e.g.


p{margin:0 0 50px}
.wrap {
	width:50%;
	margin:auto;
	border:1px solid #000;
	background:url(images/repeat-test.gif) repeat-y 0 0;/* a 50px repeat*/
	line-height:50px;/* repeat height */
}



<div class="wrap">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquet sollicitudin ligula, vel pellentesque velit ultricies vitae. Morbi in ligula at lorem accumsan faucibus. Curabitur eget cursus nunc. Aliquam non metus gravida sem scelerisque suscipit. Vivamus eu arcu quis nulla porta fermentum at at nibh. Vivamus orci elit, tristique ac posuere sed, tincidunt eget odio. Praesent semper, augue a malesuada sodales, mauris nunc pretium erat, eget aliquam nibh nunc quis arcu. </p>
	
</div>

It’s probably too rigid for a real layout but a useful trick none the less :slight_smile:

15

That’s a good idea and would work as long as the repeat wasn’t too high but also means that margins would need also need to be consistent also.

e.g.


p{margin:0 0 50px}
.wrap {
	width:50%;
	margin:auto;
	border:1px solid #000;
	background:url(images/repeat-test.gif) repeat-y 0 0;/* a 50px repeat*/
	line-height:50px;/* repeat height */
}



<div class="wrap">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In aliquet sollicitudin ligula, vel pellentesque velit ultricies vitae. Morbi in ligula at lorem accumsan faucibus. Curabitur eget cursus nunc. Aliquam non metus gravida sem scelerisque suscipit. Vivamus eu arcu quis nulla porta fermentum at at nibh. Vivamus orci elit, tristique ac posuere sed, tincidunt eget odio. Praesent semper, augue a malesuada sodales, mauris nunc pretium erat, eget aliquam nibh nunc quis arcu. </p>
	
</div>

It’s probably too rigid for a real layout but a useful trick none the less :slight_smile:

16

cooleo, I would actually take Deathshadow’s advice. Just tell them there isn’t support for doing that right now. Simple as that. It’s part of being a developer, educating the client. If they have any reasonability at all, they will understand that you cannot do what you cannot do. The line height idea is clever, but like Paul said, WAY too restricting. Or just tell him you can do it, but have to wait for all browsers to support it and be adopted by users for it to be widely viewable. At least that gives him a choice. That’s what I would do in your situation.

17

Ahh these are all good solutions, so far I personally like this one the best :D. However the height of the image that is to repeat is 170px. DOH!! Every corner of this issue seems to be a real pain in my butt. Also unfortunately for me, I do not maintain communication w the client, nor is it my job to do so. I am simply given a design and instructed to make it happen.

I think I will probably end up going w a JS solution to calculate height and adjust the content area based off of that.

Any new solutions are more then welcome, but I am having difficulty seeing the css only method become a reality ):

Thank you all for you answers and support!!!

18

If you go with the .js solution, apply the image via a class that is added by the javascript – that way scripting off that background doesn’t appear at all. Usually it’s better to have scripted presentation not appear at all when scripting is off than to have it go all screwy for the people who don’t want it.

Though your math should be pretty simple for doing it in script. (assuming ‘target’ is pointed at that middle element)

target.style.height=(Math.ceil(target.clientHeight/170)*170)+‘px’;

Just do that at onload and maybe for every onresize. (though being a fixed width layout the latter may not be necessary). It would be one of those times where I wish all CSS implementations allowed for expressions.

Out of curiousity could we also see the header and footer images? There may be another option, but I’d have to see all the images involved. (It’s called subtractive transparency – rarely used but often effective)… would probably also hinge on the body area background as well. Image mask/layering tricks can often do fun things.

19

As for my JS solution, I’m using jQuery but its virtually the same code, tell me if you see any speed differences between your solution and mine:


var middle = $('#middle');
middle.css('height',  Math.ceil(middle.height() / 171) * 171);

As for the images, I attached a PSD, to sample the imagery, on my original post. I’m new the forum and I’m not sure if you are able to view it or not. Let me know if you are unable to view it.

Thanks!!