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

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 :slight_smile:

Hi,

You could do something like this:


<!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

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!

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.

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