Grow your CSS skills. Land your dream job.

[Solved] Getting :before element to obey main width and height (help!)

  • # February 13, 2013 at 10:35 pm

    I’ve exhausted my efforts to figure this out on my own. I’m sure it’s very simply, I’m just rather new to all of this.

    I pinned what I’m trying to do.

    [http://cdpn.io/ydrqB](http://cdpn.io/ydrqB “http://cdpn.io/ydrqB”)

    Basically, I want to make a background to a container that offsets a bit to the left and to the top. However, this container sits at 60% width on a page that has other containers beside it with different backgrounds. It also has a fluid height. When I set the width and height to the :before element I’ve made to 100%, it stretches the whole screen.

    How do I get this to obey the fluid height and fluid width of the container that it is background-ing?

    Any help would be great.

    Thanks so much.

    -Bob

    # February 13, 2013 at 10:46 pm

    Small little fix:

    http://codepen.io/ggilmore/pen/ybpGL

    You were missing `position: relative;`.

    # February 13, 2013 at 10:56 pm

    Oh wow. Working so beautifully now. So much time! My forehead’s going to have a redmark from the face-palm on this one.

    Thank you @TheDoc!

    -Bob

    # February 14, 2013 at 2:02 am

    No worries! Sometimes we stare at something for so long that we lose touch of what we should be looking for.

    `position: relative;` on the parent element is usually the solution to a bunch of positioning or z-index issues.

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

You must be logged in to reply to this topic.

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