Using different background on desktop and mobile

Basically , i want to use different backgrounds for the desktop view and mobile view however when i change the image in one of the it also changes the image in the other one . How can i change the background in mobile view because my image doesnt fit the mobile view, so i need to use a different one but when i do change it , both of them change 

There's probably a different way to go about this but this works for me:

Duplicate the section on the desktop view. Input the new background that you would like on the new section. Take the section ids of each and input them in between the brackets. Basically the point of this code is the hide one section on desktop and the other on mobile. Hope this helps!

 @media only screen and(min-width:768px) {[mobile-data-section-id]{display:none}}

@media only screen and (max-width:767px) {[desktop-data-section-id]{display:none}}