CSS-Help needed: styling headlines with background stripes « Support Forum | Kriesi.at

Support Forum » Corona

CSS-Help needed: styling headlines with background stripes

5 posts from 3 voices

Started 1 year ago by colorit2
Latest reply from Dude
This topic is resolved

Tags:

colorit2
Member

Hi,

I would like to style my h5-headlines with background stripes. Example screenshot:

http://i43.tinypic.com/24lqyk5.jpg

I have tried it with this CSS:

h5 { background: url("../images/shared/stripes.gif") repeat-x scroll center 20px transparent; float: left; text-align: center; width: 100%; font-size: 12px !important; letter-spacing: 2px !important; font-weight: normal !important; margin-top: 10px; text-transform: uppercase; color: #777777; margin-bottom: 6px; }

But with this, the stripes goes behind the headline text, like this:

http://i44.tinypic.com/iedspc.jpg

How can I do it, so that the text is like in the example above left blank from the stripes behind it?

Thanks for any help!

Posted 1 year ago #
johnnysteel
Member

you can do this kind of thing by slapping your h5 contents in a span and styling the span

Posted 1 year ago #
Dude
Dude

Hey,
yes - you need to wrap your text into a span and apply a white background color to it.I see no other chance to do this.

Posted 1 year ago #
colorit2
Member

ok, thanks a lot, I'm not really so familiar with CSS ;-)

I've tried this with the help of SELFHTML (http://de.selfhtml.org/css/formate/zentrale.htm)

If somebody likes to style his headlines in such way, too, here is the code:

The CSS:

h5 { background: url("../images/shared/stripes.gif") repeat-x scroll center 18px transparent; float: left; text-align: center; width: 100%; font-size: 12px !important; letter-spacing: 2px !important; font-weight: normal !important; margin-top: 10px; text-transform: uppercase; color: #777777; margin-bottom: 6px; }
.h5background { background-color: #FFffff; padding: 0 10px; }

And the code:

<h5><span class="h5background">My latest Projects</span></h5>

Works now fine and looks like this:

http://i43.tinypic.com/24lqyk5.jpg

Thanks for your help!

Posted 1 year ago #
Dude
Dude

Glad that it works now :)

Posted 1 year ago #