[thelist] PNG bg-Positioning

ben morrison morrison.ben at gmail.com
Fri Jan 12 04:27:21 CST 2007


On 1/11/07, max case <max.case at gmail.com> wrote:
> Hi all,
>
> Hoping someone can help out with this problem. PNGs with ie6
> I found the fix to get them to display properly.
> My problem is I would like the BG image aligned right (you can see how it
> should look in Firefox).
> Any suggestions would be appreciated, since I haven't found anything
> searching and hacking at it.

A way round it would be to use extra markup, using an empty div for
our PNG file, which is positioned where we want it and has the
dimensions of the PNG, I'm using position:absolute to place it and
z-indexes so that the copy is in front of the PNG. I've used a holder
div with position:relative - this way the absolute positioned divs are
held within this div.

<style>
body {
	background-color: #999900;
}
.holder {
	position:relative;
}
.pngBG {
	background:url(little_boy.png) 0 0 no-repeat;
	position:absolute;
	right:0;
	top:0;
	z-index:10;
	width:300px;
	height:467px;
}
.copy {
	position:absolute;
	left:0;
	top:0;
	z-index:11;
}
* body .pngBG {
	background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,
sizingMethod=image src='little_boy.png');
			}
			
</style>

</head>

<body>
<div class="holder">
	<div class="pngBG">
	
	</div>
	<div class="copy">
		<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.

	Et harum quidem rerum facilis est et expedita distinctio. Nam libero
tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
minus id quod maxime placeat facere possimus, omnis voluptas assumenda
est, omnis dolor repellendus.

	Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae
ab illo inventore veritatis et quasi architecto beatae vitae dicta
sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
qui ratione voluptatem sequi nesciunt.</h1>
	</div>
</div>

ben

-- 
Ben Morrison



More information about the thelist mailing list