[thelist] CSS Backgrounds: repeat-x width:100%

[Mark Kennedy]

We recently had some discussion on this matter, initiated by a post called
'[thelist] html stretch'.

The conclusion was that you cannot stretch or manipulate background images
other than to anchor them in a certain part of your box and define how they
repeat (x, y, none or both).

See here for some useful CSS info:

http://www.blooberry.com/indexdot/css/propindex/colorbg.htm

(Index dot CSS is in general an excellent little CSS reference)

You have to imagine that your background image is drawn on a large surface, be
it repeated or not, and that your containing element (<div>, <p> or whatever) is
like a little moveable window onto this surface.  i.e. You can affect which bit
of the background you'll reveal but you can't actually modify the background at
all.

Hopefully, one day, image and background image handling on the web will improve
so that we can apply transformations to source graphics, but until then, there's
a couple of things you can try.

1) Don't use a background!

Instead use absolute positioning and the z-index property to put a large image
(as in <img src="...) behind the rest of your page.  You can then use
width="100%" on that image to make it as wide as its container element, assuming
that container has its size explicitly set.  If there is no container with an
explicit size, the image will grow to be as wide as the browser (body
tag).

2) Use two or more containers and two or more background images.

If you're trying to create some sort of column effect with your
background-image, or if you think you can create a similar effect by splitting
your background image up into components where only one, repeatable area needs
to stretch, then you can do this:

#middle {
	/* this image is your repeaty bit that appears to stretch */
	background-image: url( monk.jpg );
	background-repeat: repeat;
}
#left {
	/* this image is like 100px wide */
	background-image: url( chunk.jpg );
	background-repeat: repeat-y;
	background-position: left;
}
#right {
	/* this image is like 100px wide */
	background-image: url( funk.jpg );
	background-repeat: repeat-y;
	background-position: right;
}

<div id="middle">
	<div id="left">
		<div id="right">
			blah blah wibble wobble
		</div>
	</div>
</div>

so the images will layour up like (dots are where images repeat -- imagine
looking down on a cross section of your page)

----         -----
---.---.---.---.--

and as your page gets wider

----                     -----
---.---.---.---.---.---.---.--

Tada.  Obviously this only works with a certain sort of background, i.e. one
where the central part is repetitive.

Hope that gets you on your way... and anybody else trying to fathom a similar
problem.  I'm a bit tired so apologies for typos/garbage/nonsense.

Mark



On Wed, 17 Mar 2004, Rob Smith wrote:

>Hi 
>
>Ive created a repeatable graphic designed for widths at 1024px. However,
>this is not good practice. I need it to be 100% and not a fixed width:
>
>+-------------------------------------------+
>|////|                                 |\\\\|
>|////|                                 |\\\\|
>|////|                                 |\\\\|
>|////|                                 |\\\\|
>|////|                                 |\\\\|
>|////|                                 |\\\\|
>|////|                                 |\\\\|
>|////|                                 |\\\\|
>|////|                                 |\\\\|
>|////|                                 |\\\\|
>|////|                                 |\\\\|
>|////|                                 |\\\\|
>|////|                                 |\\\\|
>+-------------------------------------------+
>
>I have in my CSS file:
>body {
>background-image: url(/grfx/webback.jpg);
>background-repeat: repeat-y;
>width:100%;
>}
>
>But this isn't doing it. Suggestions?
>
>Rob.Smith
>-- 
>* * Please support the community that supports you.  * *
>http://evolt.org/help_support_evolt/
>
>For unsubscribe and other options, including the Tip Harvester 
>and archives of thelist go to: http://lists.evolt.org 
>Workers of the Web, evolt ! 
>