user3191160 user3191160 - 4 months ago 23
CSS Question

Background Image repeating when resizing windows width

i am trying to create a page that has a background image in between a

header
and
footer
will work on any screen size.

I have managed to create the page and it works fine on desktop screen. The problem i have is when I resize to
mobile size screen
then the background is repeated.

Here is my code:

div {
width: 100%;
height: 5886px;
background-image: url('services-yellow.jpg');
background-size: 100% auto;
background-repeat: none;
border: none;
}


Has the height attribute set at a specific height, but i am not sure how i can change this so that it works on all screen sizes.

The site can be viewed at: http://s116169771.websitehome.co.uk/testsite/

If somebody could please advise on how i could fix this, would really appreciate it.

Thanks in advance.

Answer

none is not a valid value for background-repeat, use no-repeat instead.

background-repeat property (MDN) (W3Schools)