• 0

[CSS] Repeating background image

Asked by JoeC,

 Share

Question

Veteran

JoeC

Posted
Posted

Hi all, quick question about repeating a background image.

post-143397-1223259018_thumb.jpg

If you imagine that the image above is running across the top of a browser - the green/grey is one background image, applied to the <body> tag, for simplicity's sake. The washed out green/white is a second background image running across the top of a <div> inside the body. The solid green is the rest of the site, centred in the browser.

&lt;body&gt;
 With green background
 &lt;div&gt;With washed out background&lt;/div&gt;
&lt;/body&gt;

I'm trying to get the full colour image to align properly with the central part so the angled lines all match up properly, rather than having them meeting at odd places, which would look awful.

I've probably not explained this very well, so apologies for that. If you want any clarification on the question, feel free to say.

Link to comment
https://www.neowin.net/forum/topic/678304-css-repeating-background-image/
Share on other sites

9 answers to this question

Recommended Posts

  • 0
Veteran

JoeC

Posted
  • Author
Posted

I can try. The washed out green stripes are a fixed width image, taking up 1000px in the middle of the screen. The full colour green stripes are a repeating tiled image of variable width.

Rather than have the tiling start from the top left and go across (which would almost certainly cause the two stripes not to match up like in the picture), I'm trying to get the flul colour stripes start tiling from the central div and go outwards, so they match up properly with the washed out ones.

Is that any better?

  • 0
Veteran

JoeC

Posted
  • Author
Posted

First off, just setting one as the main page background and one as the central div background would show something like this, 9 times out of 10:

eg2uo5.jpg

Secondly, would the semi-transparent PNG work in all major browsers without any messy workarounds? Specifically, IE7/6.

  • 0
Mentor

GreenMartian

Posted
Posted

IE6 doesn't like semi-transparent PNGs (without applying dirty hacks).

Try the following. Works on IE7+, Opera 9+, FF2+, Chromium. Sorry, no access to IE6 and below on my home PC.

#outside{
	height:20px;
	background-image:url("../img/stripe-dark.gif");
	background-repeat:repeat-x;
	background-position:center;
	text-align:center;
	padding:0px; margin:0px;
}
#inside{
	height:20px;
	width:500px;
	margin:auto;
	background-image:url("../img/stripe-light.gif");
	background-repeat:repeat-x;
	background-position:center;
}

&lt;body&gt;
	&lt;div id="outside"&gt;
		&lt;div id="inside"&gt;&lt;/div&gt;
	&lt;/div&gt;
&lt;/body&gt;

http://tredosoft.com/Multiple_IE <-- Should help you test everything for IE 3.0 (heh!) up to 6.0

I tested using these 2 images: post-69069-1223312571.gif and post-69069-1223312561.gif

  • 0
Mentor

GreenMartian

Posted
Posted (edited)
Do GIF's work then?

Re-Edit: Sorry misread who posted what

Yes transparent GIFs work all right in IE6, and i think down to 5.0 or something. Might even be lower.

It's too bad they can not be semi-transparent.

Edited by GreenMartian
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.