CSS Background Image Centered with Stellar Js

CSS background image centered with Stellar JS

You need to disable horizontal parallax. This will cause Stellar.js to leave your horizontal background positioning untouched.

In your example, the updated call to Stellar

$(window).stellar({ horizontalScrolling: false });

I've updated your JSFiddle example with this change: http://jsfiddle.net/wvuQm/5/

How to center parallax backgrounds with stellar.js when scaling

Set the background position x to 50%:

background-position-x: 50%;

In here:

@media screen and (max-width: 768px)
.fh5co-cover {
    heifght: inherit;
    padding: 3em 0;
    background-position-x: 50% !important;
}

PD: important! because the position is being changed in js by whatever plugin you are using.

About the gray border, couldn't find it so i guess was just a bug on your browser

Background-x position on stellar JS

Stellar.js is nothing to do with your problem.
This is because you use background: url after background-position: 50% 0;

Just replace it:

.stageOne{
background: url(http://matthewduclos.files.wordpress.com/2012/04/canoncine.jpg);
margin-top: 60px;
}
.break{
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
position: relative;
float: left;
width: 100%;
height: 700px;
}

or use background-image instead:

background-image: url(http://matthewduclos.files.wordpress.com/2012/04/canoncine.jpg);

DEMO

Stellar.js background attachment set to fixed but crazy jitter still happening

The problem wound up being an image tag that was in the same div as the background image that was involved in the parallax scrolling. Upon removing this image, jitter stopped.

---

Related Topics