CODEWITHSUNDEEP
htmlcssstyles
zenubeh
zenubeh

Reputation: 67

full img size in any screen size

When I run my code in my laptop, then the img is showin full screen. But when I run it on a bigger screen size then it comes double: enter image description here

This is my css code I use:

body {

  background: url(pic.jpg); 
  background-size: cover;  
  background-position: center;
  font-family: Lato;
  color: white;
}


html {
height: 100%
}

Can someone help me fix the issue, that the img should go full screen on any screen size?

Upvotes: 0

Views: 153

Answers (6)

Nacorga
Nacorga

Reputation: 526

This could solve your problem:

body {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    background-image: url('PATH_TO_IMG');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

You can see an example here https://codepen.io/Nacorga/pen/mjmBLp

Upvotes: 0

Anil Suwal Qode
Anil Suwal Qode

Reputation: 120

body {
  background-repeat: no-repeat;
  width:100%;
  height:100%;
}

Upvotes: 0

midnightgamer
midnightgamer

Reputation: 454

body {
  background: url(pic.jpg); 
  background-size: cover;  
  background-position: center;
  font-family: Lato;
  color: white;
  width:100%;
  height:100%;
}

html {
  height: 100%;
}

Upvotes: 0

Aravind S
Aravind S

Reputation: 2395

Since you applied it as background you can use this property to avoid double occurrence in higher resolution

background-repeat: no-repeat;

even you can mention all it in a single line like

background: #fff url('pic.jpg') no-repeat center center;

and if you want to stretch the image, then 

background-size: 100% auto;

Upvotes: 0

Suraj Libi
Suraj Libi

Reputation: 515

use 

background-repeat:no-repeat;

and you can reduce code by using

background: url('pic.jpg') no-repeat cover center;

Upvotes: 0

Charu Maheshwari
Charu Maheshwari

Reputation: 1643

Add following style to your code to avoid repeating the image:

background-repeat:no-repeat;

Upvotes: 1

Related Questions