Forums

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

Home Forums CSS Scaling SVG backgrounds

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #194020
    modiophile
    Participant

    Really simple. So I have an <h3> that I would like a single background image to cover completely, but for some reason its getting cut off?

    http://codepen.io/modiophile/pen/azwOJG

    #194056
    Paulie_D
    Member

    Not sure I understand…cover completely how?

    It’s a white twitter icon isn’t it.

    How is the finished item supposed to look?

    #194076
    modiophile
    Participant

    OK, I should give a little more background. The first two examples are of a CSS ribbon, the problem is, this ribbon is not liquid and as you can see on example #2 it runs into problems with an additional line of text…

    Which brings me to example #3, where I am going to attempt to use an SVG element to scale depending on the size of its container. (I opted for the twitter icon for the demo instead of a triangle.)

    So to answer your question, I should be seeing a single white twitter bird aligned to the right, without being cut off. Thanks!

    #194082
    Paulie_D
    Member

    Sort of like this?

    http://codepen.io/Paulie-D/pen/OPgbaN

    The two lines of text thing is always going to be an issue but then, frankly, two lines of text in a header seems excessive to me.

    #194093
    Paulie_D
    Member

    There is a technique (which may have some issues in less modern browsers) for any height element.

    http://codepen.io/Paulie-D/pen/mywRrE

    #194102
    modiophile
    Participant

    Thanks Paulie_D, that’s what I was looking for! The key was in the rule

    background-size: auto 80%;
    

    Can you tell me why it is that I couldn’t just use

    background-size: 100%;
    

    Thanks!

    #194108
    Paulie_D
    Member

    Try it…but it looked a little odd to me with the icon having no vertical space around it.

    #194111
    modiophile
    Participant

    I mean more specifically, why does the “auto” rule in

    background-size: auto 100%;

    make the twitter icon fit inside its container whereas

    background-size: 100%;

    it is over-sized and gets cut off.

    #194127
    Paulie_D
    Member

    https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

    If the background-size has one auto component and one non-auto component:
    If the image has an intrinsic proportion, then render it using the specified dimension, and compute the other dimension from the specified dimension and the intrinsic proportion. If the image has no intrinsic proportion, use the specified dimension for that dimension. For the other dimension, use the image’s corresponding intrinsic dimension if there is one. If there is no such intrinsic dimension, use the corresponding dimension of the background positioning area.

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