Using background-repeat and background-position together

I need to know if there's a way to have background-repeat and background-position in CSS used together.

Basically, I have a semi-transparent PNG that has a gradient for the first 300px followed by a flat 1px (height) by 200px (width) PNG (repeated vertically till the end of the element). The element does not have a fixed height (eg fluid).

The problem I'm facing is getting the 1px PNG to start repeating after 300px, and not before (as background-repeat does it both ways).

Is there a hack for this?

 

Since you have two png's, I assume you have two containers, right?

The outermost container should have the 1px tiled image on it, the innermost one could then have the 300px high image with no-repeat.

If I follow your question properly.

.outerdiv {
width:200px;
background:url(images/longtile.png) repeat-y;
}

.innerdiv {
background:url(images/top.png) no-repeat;
}

Should be it... though you have the issue that transparancy won't work... if you need the transparancy that is a third container around both with a padding-top of 300px, putting the image there - Then you need to set the innermost div to margin-top:-300px to put it's content over the header image.

.outerdiv {
width:200px;
background:url(images/top.png) no-repeat;
padding-top:300px;
}

.middlediv {
background:url(images/longtime.png) repeat-y;
overflow:visible;
}

.innerdiv {
margin-top:-300px;
position:relative; /* make sure it ends up on top */
}

That should do the trick I THINK. Not 100% sure as this is untested. You are probably better off using the first method and not using transparant .pngs.

 

You can use PNG transparency with Internet Explorer 5 and 6, but it'll require some (what I think is unnecessary) work.

http://www.howtocreate.co.uk/alpha.html

 

That wasn't what I meant by not working Dan, if the top .png uses transparancy it will show the tiled background through it... which is why the second example goes nuts with extra code to try and force the tiled background down the page with padding/margins.

 

Ah. It was late anyway (you can talk to me about it on IM if you want, but a quick heads up, I was preoccupied with my search engine site at the time and just kinda "drove-by" this post) when I typed that.

 

Yes you can. But it depends on which way you want to tile, and how your background image is organized (CSS sprite).

Here's some css i use for a banner...

div#topleft
{
float:left;
width:170px;
margin-left:-100%; 
height:100px;
background-repeat:no-repeat; 
background-position: 0px 0px;
}

div#topcenter
{
 margin: 0 170px 0 170px;
 height:100px;
 background-repeat:repeat-x; // THIS LINE IS PERTINENT TO YOUR CASE :)
 background-position: 0px -100px;
}

div#topright
{
float:left; 
width:170px;
margin-left:-170px; 
height:100px;
background-repeat:no-repeat; 
background-position: -0px -200px;
}

.bannerbk
{
/*background-color:#CCCCCC;*/
background-image:url(../images/logo.png);
}

Code (markup):

So, basically I'm using a css sprite to pack my banner graphics into 1 file.
The important here is "topcenter" which uses both repeat and position.

What I did was I split the photoshopped banner into 3 separate images, then created a new image (logo.png) out of those 3 which has 3 times the height of a single image. The images were pasted in one on top another...

--------
|image1|
--------
|image2|
--------
|image3|
--------

I can use background-repeat:repeat-x; for the middle image because in logo.png the separate graphics are arranged top-to-bottom, but i want to tile horizontally.


Hope this makes sense to ya

 

Hey guys, apologies for the late reply!

Dan - I think you misunderstood what I was asking for, but thanks anyways

Aztral, thanks for your tip, tho I needed a repeat-y technique, not a repeat-x. But thanks

deathshadow - Your CSS helped, tho, a negative margin pushed the middlediv up with the innerdiv. Not sure why it did that, but I modified the negative margin to "bottom: 300px;" and it worked!

the only problem is that the middlediv is now 300px longer than expected . Thanks heaps tho, I'll try to find a way to solve this small problem.

 

Thank you DeathShadow, you have really saved me!

Also thank you Nix Wanning for the bottom: 300px idea that worked great.


Finally, to add my part in all this (I understand this thread was from 2007, but it will help users when searching for fixes via Google etc, such as myself) the way I managed to get rid of the excess 300px was to use Javascript.

I used Prototype to listen for the dom:loaded event then simply set the height of middediv to it's current height minus 300 pixels. As it runs as soon as the DOM is loaded, it happens pretty much instantly so there's no weird delays which would mean you could see the div before the height modification.

Here's the code I use with the Prototype library:

var loader = 
{
	onLoadHandler : function()
	{
		$("middlediv").style.height = ($("middlediv").offsetHeight - 300) + "px";
	}
}

document.observe("dom:loaded", loader.onLoadHandler);

Code (markup):