can't think how to make this happen! repeat-x band + transparent png

**pas_non** · Apr 1, 2011 23:48

I want the negative space of the band's name to be transparent over the background, but I want the orange band to repeat to the edges of the screen.
Maybe it's just late, but I really can't sort out in my mind how on earth I'm actually going to do this!
- If I put the repeating band in a div with no width defined, it'll repeat fine, but you'll see it behind the band name, making the name not show up.
- If I just make a flat jpg of the band name, the background behind the name won't change when the window is resized
The only thing I can think of is to fake it and make just a really long orange band including the logo, as a transparent png and set it as a background. I'd miss out on an image of the logo/alt tags etc though, and I'd rather have that in there than do some weird text-hiding crap to get the name up there in the html.

... I've sat and thought about this for a long time. Is that my only option? I am out of ideas. Can anyone help? I really appreciate it

**Paul O'B** · Apr 2, 2011 03:04

Hi,

You could do something like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,body{margin:0}
h1{
    margin:0;
    height:109px;
    background:#fcf;
}
.l,.r{
    width:50%;
    float:left;
    height:109px
}
.l{margin-right:-478px}/* half layout width*/
.r{float:right;margin-left:-478px}
.l div{background:red;height:109px;margin-right:478px}
.r div{background:blue;height:109px;margin-left:478px;}
</style>
</head>

<body>
<div class="l"><div></div></div>
<div class="r"><div></div></div>
<h1>Jim's Brain image goes here 956px wide</h1>
</body>
</html>

Similar to techniques used in these demos.

Untitled Document
Untitled Document

**pas_non** · Apr 2, 2011 13:32

Thank you for replying. Those examples are brilliant! ..& confusing. Wow... I do not see what's going on here, but I'm going to try it out. Would you mind giving me a bit of an explanation as to how this works?
Thank you!

Originally Posted by Paul O'B

Hi,

You could do something like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,body{margin:0}
h1{
    margin:0;
    height:109px;
    background:#fcf;
}
.l,.r{
    width:50%;
    float:left;
    height:109px
}
.l{margin-right:-478px}/* half layout width*/
.r{float:right;margin-left:-478px}
.l div{background:red;height:109px;margin-right:478px}
.r div{background:blue;height:109px;margin-left:478px;}
</style>
</head>

<body>
<div class="l"><div></div></div>
<div class="r"><div></div></div>
<h1>Jim's Brain image goes here 956px wide</h1>
</body>
</html>

Similar to techniques used in these demos.

Untitled Document
Untitled Document

**Paul O'B** · Apr 2, 2011 14:56

Hi,

To cover the full width of the screen I used 2 floats of 50% width.

To make space in the middle of those floats a negative margin is applied to the floats which creates a vacuum in the middle that content will be sucked into.

When you apply a negative margin to the opposite side of a float (e.g. a right negative margin on a left floated element or a left negative margin on a right floated element) you allow content to overlap on that side.

Therefore with 478px taken off each side it allows a gap in the middle to appear that is the width of your layout (956px). However this will just mean content will overlaps so thye final step is to nest a div inside each float and give it a positive margin (478px for each float) to keep the background colour away from overlapping the middle of the area.

The result is a full width band of colour apart from the middle section where you can stick your image.

**pas_non** · Apr 4, 2011 13:27

that just blew my mind :P
I'm going to spend all week learning that because it sounds brilliant. sigh.. i have so far to go..
thank you!

Originally Posted by Paul O'B

Hi,

To cover the full width of the screen I used 2 floats of 50% width.

To make space in the middle of those floats a negative margin is applied to the floats which creates a vacuum in the middle that content will be sucked into.

When you apply a negative margin to the opposite side of a float (e.g. a right negative margin on a left floated element or a left negative margin on a right floated element) you allow content to overlap on that side.

Therefore with 478px taken off each side it allows a gap in the middle to appear that is the width of your layout (956px). However this will just mean content will overlaps so thye final step is to nest a div inside each float and give it a positive margin (478px for each float) to keep the background colour away from overlapping the middle of the area.

The result is a full width band of colour apart from the middle section where you can stick your image.

User Tag List

Thread: can't think how to make this happen! repeat-x band + transparent png

Thread Tools

Display

can't think how to make this happen! repeat-x band + transparent png

Bookmarks

Bookmarks

Posting Permissions