Help with parallax

[lambert]

I am using parallax, and am trying to have a white flash at the bottom of the image, so that it blends in with the colour below http://www.universalatlantic.co.za/

This is the css I use:

.bottom-parallax {

    height: 70px;

    margin-left: -2%;

    max-width: 1000px;

    position: absolute;

    width: 100%;

}

.bottom-parallax img {

    position: relative;

    left: 0;

    bottom: 0;

}

As you can see from the screenshot I end up with a gap between the bottom of the flash and the bottom of the image

Can anyone help?

Many thanks

Lambert

[Maureen]

Lambert, I added a margin to the bottom flash image of 1.75em and it seem to work:

border-width: 0;

margin-bottom: 1.75em;

text-align: center;

[scrambler]

But the question I have is why are you not simply using an image that already looks like the flash as the parallax background images, instead of bothering with different pieces?

[lambert]

Thanks Maureen, that did the trick! Scrambler, I want to scroll the flash over the bg image, If you look now, you will see what I mean 🙂

[lambert]

The problem I picked up now is that when I resize the screen, the background picture pops out underneath. Is there any way to retain the proportions on resizing?

[scrambler]

OK got it, nice effect 🙂

The issue is that by default Xtreme sets the height of the parallax band to a fixed height. this makes sense in most cases, but in your case you actually need the height of the parallax image window to be just the height of the content that is being overlaid over the background image.

It looks like you can do that by doing the following

First remove all the styling you have on the bottom parallax div
.bottom-parallax {
    height: 70px;
    margin-left: -0%;
    max-width: 1000px;
    position: absolute;
    width: 100%;
}

As you dont want that div to be positionned absolute.

Second add a clearing div after the bottom-parallax div so that this area knows its height
<div class=”clear:both;”></div>

Then add a margin-bottom:0;  as inline style of your bottom flash mask image. You need to set that margin to zero as there is a default one being applied anyway

Then add the rule below in the theme custom css rule box to let the area over the image scale vertically with the content

.parallax[id*=post-] {height:auto;}

[scrambler]

@weaver, this brings up an interesting point. By default Parallax post have a window with a fixed height. In case like these where people actually pace some content in the windows, they may want that window to just have the height of the overlaid content.

For these cases it may be nice to have an option for Automatic height instead of fixed height.

[lambert]

I must be doing something wrong, I can get it to work with the post right at the bottom, where the whole excerpt is an image overlaid over the background, but I still cannot get it to work properly on the top post

[scrambler]

The issue we were trying to solve appears to be solved as the flash works at all resolution.

The only issue I see with the top part is that it ends up being floated right because of the rule

aside, details, figcaption, figure, footer, header, menu, nav, section {float: right;}

I don’t know if you added this rule, if so it is too general.

If it is a weaver rule, we can override it on the parallax post with

section.parallax {float:none;}

But let us know, because if it is a weaver rule, weaver probably needs to review it

[lambert]

Hi Scrambler

I removed the rule: aside, details, figcaption, figure, footer, header, menu, nav, section {

    float: right;

}

what does it look like in Explorer. now?

[scrambler]

It scales down fine now

Can you confirm the following for me

Why did you add that rule in the first place?

Did you actually not see the top post content being cutoff when the browser got smaller on other browsers?

[lambert]

Hi Scrambler, in all likelyhood i copied it from firebug, it seemed to work at the time, and when I made the changes I didn’t delete it 🙂

[scrambler]

Beware of rules like this that have very non specific selectors that apply to basically everything 🙂

[Author]

Posts