- This topic is empty.
January 22, 2015 at 3:23 pm #194020
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?January 23, 2015 at 2:52 am #194056
Not sure I understand…cover completely how?
It’s a white twitter icon isn’t it.
How is the finished item supposed to look?January 23, 2015 at 7:49 am #194076
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!January 23, 2015 at 8:11 am #194082
Sort of like this?
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.January 23, 2015 at 9:09 am #194093
There is a technique (which may have some issues in less modern browsers) for any height element.January 23, 2015 at 10:34 am #194102
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
Thanks!January 23, 2015 at 11:39 am #194108
Try it…but it looked a little odd to me with the icon having no vertical space around it.January 23, 2015 at 12:06 pm #194111
I mean more specifically, why does the “auto” rule in
background-size: auto 100%;
make the twitter icon fit inside its container whereas
it is over-sized and gets cut off.January 24, 2015 at 1:06 am #194127
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.
- The forum ‘CSS’ is closed to new topics and replies.