The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "SVG" Oct 14 - 6:30 PM Eastern
Get a free trial // 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.

    []( “”)

    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.


    # February 13, 2013 at 10:46 pm

    Small little fix:

    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!


    # 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed