I create a new element applied to #zone-branding-wrapper. I works but the background image leave a white margin at the top.

What can I do?

Comments

hatuhay’s picture

hatuhay CreditAttribution: hatuhay commented
Category: Bug report » Support request
Status: Active » Closed (works as designed)

Have to add to a top-padding, the lower the effect greater the padding.

chefnelone’s picture

chefnelone CreditAttribution: chefnelone commented

What do you mean for top-padding?
Is it a css style? (then it should be padding-top... )
Or is it a configuration? if so where?

hatuhay’s picture

hatuhay CreditAttribution: hatuhay commented

Sorry if I was not clear.
You have to apply css "padding-top".

Nikolino’s picture

Nikolino CreditAttribution: Nikolino commented

I added the top padding but the position of the background doesn't change ... what could be the problem?

chefnelone’s picture

chefnelone CreditAttribution: chefnelone commented

Same problem here, padding-top doesn't solve the problem.

chefnelone’s picture

chefnelone CreditAttribution: chefnelone commented
Status: Closed (works as designed) » Active
hatuhay’s picture

hatuhay CreditAttribution: hatuhay commented

The white space is generated by the script used for this effect.
This is not part of the module itself.
Please refer to the script page for a brief explanation and simple examples.

halmsx’s picture

halmsx CreditAttribution: halmsx commented

had the same problem. so i add overflow:hidden and make the speed slower. its now works. i didnt have to add any padding-top.

lamp5’s picture

lamp5
Primary language Polish
Location Rzeszow
CreditAttribution: lamp5 commented

Add in css:
background-attachment: fixed;

hatuhay’s picture

hatuhay CreditAttribution: hatuhay commented
Status: Active » Closed (fixed)
Beezer75’s picture

Beezer75 CreditAttribution: Beezer75 commented

#9 fixed the issue for me:

Add in css:
background-attachment: fixed;

chefnelone’s picture

chefnelone CreditAttribution: chefnelone commented

These worked for me:

background-attachment: fixed!important;
overflow:hidden;

knalstaaf’s picture

knalstaaf CreditAttribution: knalstaaf commented

The Bootstrap 3 theme provides the option to use a sticky header. But when you're using a banner (that uses the parallax effect) below the fixed header, it would wrongly interpret the offset of the background image (using the same amount as the height of the fixed header).

Could solve it by adding this to my stylesheet (altering the Bootstrap behaviour):

body.navbar-is-fixed-top.node-type-that-uses-banner{
    top: 0;
    padding-top: 0 !important;
}

body.navbar-is-fixed-top.node-type-that-uses-banner header #navbar{
    height: 120px;
}

.parallax-banner{
    position: absolute;
    top: 0;
    padding: 120px 0 0; /* 120px = the height of the fixed header */
}

<body>
  <div id="navbar"> FIXED HEADER </div>
  <div class="parallax-banner"> BANNER </div>
</body>

There was an element further down which would still cause this erroneous background-position, leaving too much white space above. To get this out of the way I added the following line in the jquery.parallax.js (in the update() function):

// This line is present by default:
$this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px"); 

// Added this extra line with the class of the troublesome element, and added "-260+" in its calculation formula:
$('.mydiv').css('backgroundPosition', xpos + " " + Math.round(-260+(firstTop - pos) * speedFactor) + "px");
brickhauser’s picture

brickhauser CreditAttribution: brickhauser commented

#9 & #11 worked!
Add background-attachment: fixed;

Thanks.