Search code examples
jqueryhtmlcssparallax

Adding data-0 attribute to div

I want to add this..

data-0="background-position:0px 0px;" data-500="background-position:0px -250px;"

..to a div called 'section-1'. This is my code called within my document ready function, but it doesnt seem to work:

if($(window).width() > 767){
  $('#section-1').attr('0', 'background-position:0px 0px;');
  $('#section-1').attr('500', 'background-position:0px -250px;');
}

My css looks like this

#section-1{
  background-image:url(test.jpg); width:100%; height:500px;
}
@media only screen and (min-width: 767px){
  #section-1{
    background-image:url(test.jpg); background-size:100%; height:500px;
  }
}

It's for some parallax in case anyone was wondering.

Solution

  • Your attribute is called data-0 so give the complete attribute name

    $('#section-1').attr('data-0', 'background-position:0px 0px;');