Okay, the topic title is a bit ambiguous, but essentially this is what I want to do (see example). I have several categories of services in h1 tags and I want this diagonal graphic element to sit adjacent to each title. Since the graphic is too wide, I want it to be clipped on the right side and the left side intact.
Thank you, nice use of the pseudo-element to create a block.
I've never seen percentages used with absolute positioning, can you explain how the left: 100% moves the background exactly right of h1? For instance, if the block comes immediately after h1, why doesn't left: 0px work if it even needs to be defined at all?
Okay, the topic title is a bit ambiguous, but essentially this is what I want to do (see example). I have several categories of services in h1 tags and I want this diagonal graphic element to sit adjacent to each title. Since the graphic is too wide, I want it to be clipped on the right side and the left side intact.
http://codepen.io/copaesthetic/pen/kfqdJ img method
http://codepen.io/copaesthetic/pen/cGdph background img method
Extra question: Why is it that h1 tags take the full width of the container instead of the inherit width of the text its wrapped around?
http://codepen.io/wolfcry911/pen/EDcsL
h1 elements are block level by default and take up all available width
Fork of @wolfcry911 Codepen without set width.
http://codepen.io/anon/pen/wgbsc
May cause scrolling issues on mobile
Thank you, nice use of the pseudo-element to create a block.
I've never seen percentages used with absolute positioning, can you explain how the left: 100% moves the background exactly right of h1? For instance, if the block comes immediately after h1, why doesn't left: 0px work if it even needs to be defined at all?
A pseudo element isn't actually after the the h1 element...it's after the content of the h1.
It's kind of like this
If that make any sense.
Gotcha, thanks.