Parallax....

[Gregor]

Wellicht niet helemaal de juiste plaats en als de vraag niet hier gesteld mag worden, laat me dat ajb weten.

Op de pagina https://www.test.uisge-beatha.eu/gastenboek.html verschuift de foto die als achtergrond staat ingesteld. Hoe kan ik er nu achter komen wat de veroorzaker is waarom de afbeelding niet meer op zijn oorspronkelijke positie wordt getoond?

Ter info:
stellar.js wordt i.c.m. jquery gebruikt.

De html-code is:

Code: Select all

{if $display_header_image == "+"}                  
      <!-- Slider -->
      <section class="sliderWrapper">
        <div class="parallax" data-stellar-background-ratio="0.6" style="background-image: url({$headerimg})"> 
        {if !empty($headerimgtext)}
          <div class="container">
            <div class="row">
              <div class="col-sm-12">  
                {if !empty($headerimgtext)}
                  <h3>{$headerimgtext}</h3>
                {/if}
              </div>
            </div>
          </div>        
        {/if}
        </div>      
      </section>
      {/if}

Het CSS is:

Code: Select all

.parallax {
        background-image: url({$headerimg});
	background-repeat: no-repeat;
	background-attachment: fixed; 
	background-position: center bottom; 50% 0;
	background-size: cover;
	[[* min-height: 200px; *]]
        height:auto!important; 
        width: 100% !important;
	padding: 15% 0 0; 
	[[* position:relative; *]]
	color:#FFF;
	text-align: center;
	}
	.parallax h3 {
		font-size: 44px;
		text-transform: uppercase;
		margin: 30px 0;
		letter-spacing: 0.1em;
		}
	.parallaxMask {
		width: 100%;
		height: 100%;
		top:0;
		bottom:0;
		overflow: hidden;
		position: absolute;
		background: rgba(0,0,0,0.55);
		padding: 60px 0;
		}

[Rolf]

Wat zet die afbeelding daar neer?
Als ik met Inspector kijk dan verandert de background position waarde als ik het scherm verschuif... er moet dus wat "logica" achter zitten.

[Gregor]

Die background-position zag ik ook verschuiven, op twee plaatsen, nl. bij de <div class="parallax"...... en in het css. Zie alleen niet hoe die background-position bij de <div..... wordt geplaatst.

In een init-js file vond ik:

Code: Select all

/*
 * Stellar.js v0.6.2 
 * Copyright 2014, Mark Dalgleish 
 * http://markdalgleish.com/projects/stellar.js 
 * http://markdalgleish.mit-license.org
-------------------------------------------------------- */
    $(window).stellar({
        horizontalScrolling: false,
        responsive: true
    });

/*
 * Smaller header on scroll event
-------------------------------------------------------- */
    $(document).on("scroll",function(){
        if($(document).scrollTop()>300){
            $('header').addClass('smaller');
            $('body').removeClass('show-search');
        } else{
            $('header').removeClass('smaller');
        }
    });

In het js vind ik:

Code: Select all

supportsBackgroundPositionXY = $('<div />', { style: 'background:#fff' }).css('background-position-x') !== undefined,

		setBackgroundPosition = (supportsBackgroundPositionXY ?
			function($elem, x, y) {
				$elem.css({
					'background-position-x': x,
					'background-position-y': y
				});
			} :
			function($elem, x, y) {
				$elem.css('background-position', x + ' ' + y);
			}
		),

		getBackgroundPosition = (supportsBackgroundPositionXY ?
			function($elem) {
				return [
					$elem.css('background-position-x'),
					$elem.css('background-position-y')
				];
			} :
			function($elem) {
				return $elem.css('background-position').split(' ');
			}
		),