- This topic is empty.
-
AuthorPosts
-
January 22, 2015 at 3:23 pm #194020modiophileParticipant
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 #194056Paulie_DMemberNot 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 #194076modiophileParticipantOK, 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 #194082Paulie_DMemberSort 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.
January 23, 2015 at 9:09 am #194093Paulie_DMemberThere is a technique (which may have some issues in less modern browsers) for any height element.
January 23, 2015 at 10:34 am #194102modiophileParticipantThanks 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!
January 23, 2015 at 11:39 am #194108Paulie_DMemberTry 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 #194111modiophileParticipantI 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.
January 24, 2015 at 1:06 am #194127Paulie_DMemberhttps://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. -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.