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

[rctonnie]

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

[TheDoc]

Small little fix:

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

You were missing `position: relative;`.

[rctonnie]

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

[TheDoc]

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.

[Author]

Posts