Background image not working properly on a tablet

Hello support-team,

I spend a lot of time to create a background image which is showing properly on all devices. Therefor I used Quick CSS like this:

.main_color {
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover; }

.page-id-12 .main_color {
background-image: url(“http://test.extendum.nl/wp-content/uploads/header_uil_1920x1050.jpg”); }

@media only screen and (max-width: 767px) {
.main_color {
background-attachment: fixed;
background-position: 35% 0;
background-repeat: no-repeat;
background-size: 100%; }

.page-id-12 .main_color {
background-image: url(“http://test.extendum.nl/wp-content/uploads/header_uil_mobile.jpg”); }}

But the background image is not working properly on a tablet. The image is too big on a tablet and it looks like it’s not responsive on the right way. I made a sample to show exactly what I mean by that. Please check: test.extendum.nl/wp-content/uploads/Sample.jpg

I hope the support-team can help me by this.

Greeting from Marcel