Grow your CSS skills. Land your dream job.

Something weird

  • # November 15, 2012 at 10:38 pm

    Just wondering why this happens. It’s kind of hard to explain, but if you look at the example, you’ll see what I mean. I’m sure there’s a perfectly logical reason for this, but why does the image appear in between the H2 tags text and background color? I would think that the H2 tag would appear completely under or over the image…

    [This is weird](http://codepen.io/msguerra74/pen/kbnzj “Weird”)

    # November 15, 2012 at 10:44 pm

    Yeah, that’s weird…

    # November 15, 2012 at 11:01 pm

    @msguerra74 Are you trying to accomplish this? http://jsfiddle.net/7kxQN/

    # November 15, 2012 at 11:35 pm

    @ChristopherBurton – I was trying to do [something like this.](http://codepen.io/msguerra74/pen/kbnzj)

    @joshuanhibbert – Haha, I thought for sure you’d be able to tell me the reason was because of some obscure anomaly in the css spec on how block level element backgrounds are rendered, or something fancy like that!

    # November 15, 2012 at 11:51 pm

    @msguerra74 If I’m understanding you correctly, you should just be able to remove your margin-top or set your margin-top: 0 for both h2 and h3.

    That will set h2 and h3 below the images. Is this what you mean?

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

    # November 15, 2012 at 11:55 pm

    I actually wanted the H tag to partially overlay the image, which I know how to do, but ran into that weird issue in the process. I was really just wondering why that was happening more than I was wondering how do do what I was doing.

    I appreciate all the help though!

    # November 16, 2012 at 12:06 am

    That’s sort of cool, actually.

    # November 16, 2012 at 12:08 am

    Haha, yeah it is.

    # November 16, 2012 at 2:31 am

    It seems like inline elements (such as img) are stacked higher than block elements, regardless of whether they come before or after [the block element].

    I think what’s happening is that because the img and h2 are sibling elements, the img overlays the actual h2 itself (in this case, the background) based on what I said above, but the text inside the h2 overlays the img because it is a child of the h2.

    Here’s something I wrote that should hopefully explain what I mean: http://codepen.io/Iire/pen/fheGA

    # November 16, 2012 at 10:04 am

    I don’t know what to say. Like magic. The text get out from the background.

    # November 16, 2012 at 11:11 am

    @Meta_Ing That’s really interesting and weird at the same time, thanks for sharing.

    @Hompimpa It’s neat because I love magic!

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

You must be logged in to reply to this topic.

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