CODEWITHSUNDEEP
htmlcss
mowen10
mowen10

Reputation: 393

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.

Upvotes: 0

Views: 564

Answers (5)

Mohamed Yasar SA
Mohamed Yasar SA

Reputation: 1

*background-repeat:no-repeat;*

This code doesn't solve the problem.

As the problem is when you're in desktop site then the background works fine,then as of a sudden when you switch to mobile site the height of the background such as body shrinks and the background is repeated

And if we use //background-repeat:no-repeat; Then we might encounter another problem that the background will only work for the content other than the content it will remain blank and white.

Here is a basic structure of css on how to overcome this problem.

*body{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: calc(100vh - 100px);
}*

Upvotes: 0

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10187

Use background-repeat:no-repeat

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

or simply short the code

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

Upvotes: 1

andreas
andreas

Reputation: 16936

Here is a list of possible values for background-repeat, you need:

background-repeat: no-repeat;

None doesn't exist for this property.

Upvotes: 1

Mohammad Usman
Mohammad Usman

Reputation: 39322

Change background-repeat: none; to background-repeat: no-repeat; none is not a valid value for background-repeat property.

Your code should be:

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

You can also use short hand css background property as follows:

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

More Details

Upvotes: 0

Error404
Error404

Reputation: 744

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

background-repeat property (MDN) (W3Schools)

Upvotes: 2

Related Questions