CODEWITHSUNDEEP
htmlcss
Olubunmi
Olubunmi

Reputation: 91

How to avoid background image tile when browser window resizes

I used an actual image for the background-image inside body tags then fixed it to have an example of the actual site

When I view on a large screen the background image tiles like this enter image description here

How can I make it in such a way that the image does not tile and remains a 'single' that was shown in the actual website.

The CSS I'm using is below

body {
margin:0; padding:0;
background: url(../images/new.jpg) fixed #A8BFAD;
 }

Upvotes: 0

Views: 2462

Answers (2)

Turnip
Turnip

Reputation: 36662

If you want the image to remain actual size:

body {
        background: url(../images/new.jpg) fixed #A8BFAD no-repeat;
    }

If you want the image to fill the screen:

body {
    background: url(../images/new.jpg) fixed #A8BFAD;
    background-size: cover;
}

Upvotes: 4

Tim Ackroyd
Tim Ackroyd

Reputation: 635

Add background-repeat:no-repeat; to body in your CSS

body {
  margin:0; 
  padding:0;
  background: url(../images/new.jpg) fixed #A8BFAD;
  background-repeat:no-repeat;
}

Upvotes: 0

Related Questions