CODEWITHSUNDEEP
css
shivani
shivani

Reputation: 1028

background image to cover whole page

I want to set responsive image as background for my whole page.

This is my CSS Code

body
        {
        background-image: url('https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg'); 
        background-repeat: no-repeat, repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
        }
<body>


</body>

But i am having issue when I open my page in small Screen. It don't display as it should be.
Please help me to fix this.

Upvotes: 0

Views: 6520

Answers (7)

Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

In large screen it should be ...

background-size:cover

and in small screen (media query)

background-size:contain;

also

background-position:center

Also if you could show us in JSfiddle it would be easy to fix.

body
        {
        background-image: url('https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg'); 

        background-size: cover;
        background-size: contain;
        background-position: center;
        }
<body>

</body>

Upvotes: 2

vijayliebe
vijayliebe

Reputation: 168

It is working for me :-

body {
  background-image: url(images/background-photo.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color:#464646;
}

Upvotes: 1

HdnTesla
HdnTesla

Reputation: 101

Try the jquery-backstretch plugin. https://github.com/srobbin/jquery-backstretch

Upvotes: -1

Su Yatanar
Su Yatanar

Reputation: 13

You need to use background: instead of background-image:

 background: url(../images/img1.jpg)no-repeat center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Upvotes: -1

Codeaven
Codeaven

Reputation: 11

At first you should clear your style, there is no need of prefix for background-size anymore, also "background-repeat" property can be "repeat" or "no-repeat", Not both at the same time. Also you would like to set your background position. So your css code should look like:

background-image: url('../images/img1.jpg'); 
background-repeat: no-repeat; 
background-size: cover;
background-position: center center;

After that you have to set this style to the correct element, for your case you can use body tag. So your final code should look like:

body { 
     background-image: url('../images/img1.jpg'); 
     background-repeat: no-repeat; 
     background-size: cover;
     background-position: center center;
 }

Upvotes: 1

Rico_93
Rico_93

Reputation: 108

maybe try making the width and height 100%

Upvotes: 0

Hassan Ali Hashmi
Hassan Ali Hashmi

Reputation: 15

You Should Have To Try @Media Css Query IT Will Works For You

Upvotes: -1

Related Questions