I’m in the middle of redesigning my homepage and I stumbled upon a problem. In Photoshop I mocked up a design where the title of my site was enclosed in some “racing stripes”. But when I started to convert the mockup into html/css I realised, that I couldn’t get them right.
Here’s a reduced test case. It works there nicely. But my ultimate goal was that the site’s background would be a texture and the header and other things on the site would be background-color: rgba(black, 0.4); so the texture would shine through a litte bit.
As I have implemented it now, a solid color on the h1 is necessary to hide the orange “racing stripe” underneath. Therefore I either need to wrap the title in an extra element that gets a solid color, or I need another approach to code those stripes. I have tried splitting the header in three parts (left stripe, h1, right stripe) and float those but that didn’t work out like I wanted.
Is there another (or more elegant) way of implementing those stripes? I’m still in the process of learning html and css (I built one fixed width website and recently started learning how to use preprocessors) and I just can’t think of a better way.
I think we’ve done something like this before that could be worked.
Here is a [pen](http://codepen.io/ephoenix/pen/BFwJe “Fluid Width Racing Stripe Header”) with my results.
Thanks again for pointing me into the right direction :)
Thanks, but sadly that’s not what I was looking for. I want to create a fluid width design, with those “racing stripes”. But I don’t want them to touch the edges of the header or disappear entirely when the h1 takes up too much space.
I’m quite happy with my code now. I just wanted to post the results of my experimenting with the code Nordstrom and David gave me. I’m sorry if you misunderstood that as a cry for help.
You must be logged in to reply to this topic.