Can I change the transparency of the title background, but not the text?

  • Unknown's avatar
    barrygcooper · Member ·

    Hey everyone.

    I’m looking for a way to change the transparency of the black title square at barrycooper.com, while keeping the white title text at full opacity.

    Is that possible?

    Thanks for your help. This forum is wonderful :)

    The blog I need help with is: (visible only to logged in users)

  • kathrynwp · Staff ·

    While you can’t do this with traditional CSS methods – elements contained within the element on which you change opacity will always inherit the container’s opacity – you can do it with a colour mode called RGBA, which is supported in newer browsers. Try this:

    .site-branding {
	background-color: rgba(0,0,0,.5);
}
.site-title a, .site-description {
	opacity: 1;
}

    More about opacity: https://developer.mozilla.org/en-US/docs/Web/CSS/opacity

    More about RGBA support: http://caniuse.com/css3-colors

    Let me know how it goes!

  • kathrynwp · Staff ·

    p.s. I really love your header image!

  • Unknown's avatar
    barrygcooper · Member ·

    Wonderful! Worked like a charm. Thanks kathrynwp!

    The header image, by the way, is a detail from a design by Peter Savile, one of my favourite graphic designers. (I put a credit on my About page as I’m a huge fan).

  • Unknown's avatar
    barrygcooper · Member ·

    By the way, still on the subject of the black box at the top of the page – how would I reduce the space between the bottom of the box and the bottom of the “Barry Cooper” text?

    Very grateful for your help.

  • kathrynwp · Staff ·

    Wonderful! Worked like a charm. Thanks kathrynwp!

    Great, glad that did the trick.

    The header image, by the way, is a detail from a design by Peter Savile, one of my favourite graphic designers. (I put a credit on my About page as I’m a huge fan).

    Very cool, I’ll definitely check out his work!

    how would I reduce the space between the bottom of the box and the bottom of the “Barry Cooper” text?

    I used my browser inspector to right-click the box and see where the padding was being applied. You can use this to override it, just adjust 0.6em for the padding-bottom value as you like.

    .site-branding {
	padding-top: 1.3em;
	padding-right: 1.3em;
	padding-left: 1.3em;
	padding-bottom: 0.6em;
}
  • Unknown's avatar
    barrygcooper · Member ·

    Brilliant kathrynwp, thank you very much.

    I’m at the stage where I can use the browser inspector to isolate the element that needs adjusting. Where I usually stumble is in not knowing what the property name is (in this case “padding-bottom”).

    But I’m slowly getting a handle on it! Thanks so much for pointing me in the right direction.

  • kathrynwp · Staff ·

    You’re very welcome.

    I’m at the stage where I can use the browser inspector to isolate the element that needs adjusting.

    Cool – good for you, you’re already way ahead of lots of folks. :-)

    Where I usually stumble is in not knowing what the property name is (in this case “padding-bottom”).

    HTML Dog has a couple of good CSS tutorials you might want to check out, could help you get a better handle on CSS properties and what they do:

    http://htmldog.com/guides/css/

    Have fun!

  • The topic ‘Can I change the transparency of the title background, but not the text?’ is closed to new replies.