Use @media queries like AOU told you >>@media only screen and (max-width: 480px) { PUT_THE_BG_IMG_CODE_HERE } This means, that the "PUT_THE_BG_IMG_CODE_HERE" will get triggered only for the screen version of the site (as opposed to print version) and at 480px screen width and below https://www.w3schools.com/cssref/css3_pr_mediaquery.asp https://stackoverflow.com/questions/9506069/media-queries-and-background-images https://www.w3schools.com/cssref/css3_pr_background-size.asp you can do testing there with "try it" and see the different options, also left panel, middle So that would give something like >>@media only screen and (max-width: 480px) { body{ background-image: url("myImage/image.jpg") 100%;} } https://www.lifewire.com/stretch-background-image-3466979 https://stackoverflow.com/questions/17988792/responsive-repeatable-background-image-for-body-change-in-media-query-to-cover