How do I lock in place an image inside a div ?

[xaviercardil]

I am trying to do this framing around a div and while I get the desired effect, only one of the frames gets locked in place when I resize the screen. The inferior frame is not locked in place because I am using : bottom -350px to position it initially.

Image demos :

Frames on original size wrapping the div http://www.awesomescreenshot.com/image/94488/69890f8b0782232694036906a06342f5

Bottom frame out of place when resizing screen :

http://www.awesomescreenshot.com/image/94489/e2d74856cab4ecdfa74e7ac540ab57c8

code : http://codepen.io/anon/pen/OPKqdg

How can I make the frame to stay in place ? Everything else stays in place when resizing windows or opening the site ( non responsive ) on a phone.

Thank you guys !

[Paulie_D]

You’ll have to find a way of linking the actual images in the Codepen for this to make much sense.

[xaviercardil]

Here, this is the codepen with the images working

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

[Paulie_D]

It’s a nice attempt (and closer than I got) but the images don’t center properly and don’t really frame the banner as indicated in the specimen required image.

I played with this for a few minutes and I’m going to have to have a serious think about it.

There are multiple requirements, responsiveness, alignment, overlap, and the fact that the images are wider than the banner.

A re-stucture of the HTML is where I would be starting and moving those images out of the HTML and into the CSS feels right too.

Absolute positioning is not the way to go I feel as it’s very inflexible or adaptable.

[Paulie_D]

OK…with inline images.

http://codepen.io/Paulie-D/pen/vEowJV

I think swapping out the images for elements (or pseudo-elements) is the way to go but its’a little trickier as they don’t have an inherent height.

[xaviercardil]

I will study the code and let you know, but looks pretty good now !

[Author]

Posts