Mobile background image not responsive

Mobile background image not responsive. I have tried many different CSS combinations found on the forum but nothing seems to make any difference. This is what i tried last. nothing. Ive been checking it on Responsinator - www.lifespeedgaryd.com. Help please

@media (max-width: 300px){

html body.custom-background{
background-image: none;
}

#masthead > .container:before{
display: block;
height: 131px;
width: 100%;
background-image: url(‘http://lifespeedgaryd.com/wp-content/uploads/2018/02/shawna-caldwell2.jpg’);
background-repeat: repeat-x;
background-position: top center;
background-attachment: scroll;
margin-top: -75px;
}

}

hey there

Hope you are having a good day and thank you for your question :slight_smile:
Please add this CSS in appearance - customize - additional CSS

body.home {
background-position: 35% 0%;
}

You can play with percentages to adjust background position on x or y axis, more about this can be found here:
https://www.w3schools.com/cssref/pr_background-position.asp

Thanks!
Colorlib Support Team