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