0

I'm trying to get the background-x to have be at 50%, I've read the stellar documentation and seen the demo. Unfortunately it would change the x position to 50%. What am I missing?

This is my container for the image 

<div class="break stageOne" data-stellar-background-ratio="0.5"></div>

This is my default stellar JS to get initiate

$.stellar({
    horizontalScrolling: false,
    verticalOffset: 0
});

My class which holds the background image

.break{
background-attachment: fixed;
background-position: 50% 0;
background-repeat: no-repeat;
position: relative;
float: left;
width: 100%;
height: 700px;
}

My background image

.stageOne{
background: url(http://matthewduclos.files.wordpress.com/2012/04/canoncine.jpg);
margin-top: 60px;
}
flvll
  • 87
  • 1
  • 6

1 Answers1

0

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

raskalbass
  • 740
  • 4
  • 21