Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Overlapping text background

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #248992
    rmaspero
    Participant

    So I’ve been using Chris’s article https://css-tricks.com/multi-line-padded-text/ to help me get some centred text with a background. The only problem is I want the background to be semi transparent and I can’t think of a way of doing it. I’ve played with line height and padding but can’t come up with a solution.

    Here is a photo of what I’ve got: https://dl.dropboxusercontent.com/u/386211/Screen%20Shot%202016-12-14%20at%205.19.54%20pm.png

    What I want to do is stop the backgrounds of each line overlapping but ensure that the space between each line is the same.

    My code can be found on Code Pen: http://codepen.io/rmaspero/pen/VmVwNx

    #249043
    I.m.learning
    Participant

    How’s this look for you?

    h2 {
    background-color: white;
    opacity:.5;
    display: inline;
    }

    Change the opacity to whatever your liking.

    ****You forgot to close the .comp–hero-text CSS with a “}” ***

    .comp–hero-text {
    align-self: center;
    margin: 0 auto;
    max-width: $max-width – 200px;
    text-align: center;
    width: 80%;} <–

    #249044
    Beverleyh
    Participant

    What I want to do is stop the backgrounds of each line overlapping but ensure that the space between each line is the same.

    The part in bold is a bit ambiguous;

    • for the same vertical spacing between lines of text as is currently present, but with reduced height white highlights, reduce the top and bottom padding.
    • for the same height white highlights as is currently present, but with further apart vertically spaced text, increase line-height.

    But then…

    I’ve played with line height and padding but can’t come up with a solution.

    So I’m not sure where that fits in or what the picture illustrates.

    If the pic illustrates what you want to achieve, i have to say that it already looks very much like the demo – with semi-transparent white background to the text (what I’ve called highlights above) and white overlap, but not so much to obscure text.

    Can you clarify what it is you need help with exactly please.

    #249049
    rmaspero
    Participant

    Sorry I didn’t make it very clear, the image is the issue.

    From what I’ve found I can’t stop the semitransparent overlaps and have equal padding around each line. In that when you add padding it adds it to the top and bottom of each line. For example if you add 5px then on the first line you have 5px on top then 5px on the bottom but then there is another 5px on the top of the second line. The ideal situation would be to have 5px between each line.

    #249050
    rmaspero
    Participant

    I’m using SCSS so the bracket is at the bottom of the enclosed styles

    #249051
    Shikkediel
    Participant

    You may have to adjust the box-shadow but background-clip: content-box could be the property to help out there. Writing that while having only superficially read the topic…

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.