Grow your CSS skills. Land your dream job.

Aligning and Cropping Wide Image beside Text

  • # March 18, 2013 at 10:48 pm

    Okay, the topic title is a bit ambiguous, but essentially this is what I want to do ([see example](http://imgur.com/vEY8lWy “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?

    # March 18, 2013 at 11:10 pm

    http://codepen.io/wolfcry911/pen/EDcsL

    h1 elements are block level by default and take up all available width

    # March 19, 2013 at 7:42 am

    Fork of @wolfcry911 Codepen without set width.

    http://codepen.io/anon/pen/wgbsc

    **May cause scrolling issues on mobile**

    # March 19, 2013 at 7:10 pm

    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?

    # March 20, 2013 at 6:26 am

    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

    [h1]
    [h1:before]
    Text In Here
    [h1:after]
    [/h1]

    If that make any sense.

    # March 20, 2013 at 11:21 am

    Gotcha, thanks.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".