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?
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
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
Small little fix:
http://codepen.io/ggilmore/pen/ybpGL
You were missing
position: relative;.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
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.