How would you achieve this?

[bigdave]

I need to achieve this effect where the blue swoosh hangs out of the slider and slightly into the body below.

My initial though was to sit a .png over the top using

display:block; 
marging-top:-14em auto 0; 
position:relative; 
z-index:99;

This worked at 1100px width but it just doesnt work as the screen gets smaller. Yeah it can be fixed with media queries but it'd need A LOT of them!

The only alternative I can see is to include the swoosh as part of the slider image. In itself that isn't a major issue but it means a z-index and minus top margin for the body area under the slider, which in itself only shoves the issue further down the page.

Can anyone think of a better solution?

 

[Paul Murray]

What happens when you resize the viewport, I assume it moves or something? Just thinking out loud here but can you use the swoosh as a background image and set "background-size:cover;" to have it fit the div size? Setting it's position to absolute will take it out of the flow completely (remember to set it's parent to relative) so it won't affect the positioning of any elements and won't require a negative margin on the body.

I had a similar issue with a background image on a site I've just finished building and I had to basically check the positioning by hand by resizing the browser and adding in a media query to shift it's position at that viewport size. In your case I'd maybe just include the swoosh in the image itself and test your negative margin option to see if it causes any issues.

 

[bigdave]

 

[bigdave]

Just thinking out loud here but can you use the swoosh as a background image and set "background-size:cover;" to have it fit the div size? Setting it's position to absolute will take it out of the flow completely (remember to set it's parent to relative) so it won't affect the positioning of any elements and won't require a negative margin on the body.

Good idea! I'm using bxSlider for the functionality and have already defined the viewport height.. Will give it a go.

 

[Paul Murray]

Good idea! I'm using bxSlider for the functionality and have already defined the viewport height.. Will give it a go.

You'll probably need to tweak the overflow value for the slider too in order to allow the swoosh to hang outside of it, otherwise it will just be cropped off.

 

[Paul Murray]

[B]marging-top[/B]:-14em auto 0;

Just noticed you're using a marging rather than a margin, though I suspect this is just a mis-type rather than a typo in your live code?

 

[bigdave]

Just noticed you're using a marging rather than a margin, though I suspect this is just a mis-type rather than a typo in your live code?

yeah, just a typo in the post.

 

[bigdave]

I'm starting to wonder if defining the height of the slide is actually the issue. The swoosh sits perfectly at the bottom of the 480px high slide frame but still wants to be 480px from the top of its parent when rescaled, despite the 480px being depreciated by a media query.

Will try scrapping the fixed height (it was a lazy way of stopping the slides being cropped at the bottom any way).

 

[Paul Murray]

Have you tried absolute positioning on the swoosh?

 

[bigdave]

Removing the height of the slider and adding position:absolute; bottom:-2em; seems to have fixed things.

Cheers