full img size in any screen size

Question

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?

Possible duplicate of [Full-screen responsive background image](https://stackoverflow.com/questions/16548338/full-screen-responsive-background-image) — aMJay, Jul 23 '18 at 10:09
@AravindS this doesn0t work. When the screen is finished, then it shows me a white bar. — zenubeh, Jul 23 '18 at 11:05
yes of course since we gave #fff in the background...did you added `background-size: 100% auto;` ? — Aravind S, Jul 23 '18 at 11:08

score 1 · Answer 1 · answered Jul 23 '18 at 10:11

1

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

background-repeat:no-repeat;

answered Jul 23 '18 at 10:11

Charu Maheshwari

1,583
1
8
9

Aravind S · Answer 2 · 2018-07-23T11:13:09.780

0

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;

edited Jul 23 '18 at 11:13

answered Jul 23 '18 at 10:17

Aravind S

2,347
2
12
21

Hi Aravind, This helped but now the background img is zoomed in. Do you know how to fix this problem? – zenubeh Jul 23 '18 at 11:11
@zenubeh you need a an image with better resolution (width and height) that only can solve it – Aravind S Jul 23 '18 at 11:12
I fixed it with this code: background: url(pic.jpg) no-repeat center center fixed; Thx for your hint! – zenubeh Jul 23 '18 at 11:23
@zenubeh one note, if you used fixed, it has the chance that it won't work in mobile..double check it before using. and if it helped, accept it as answer..thanks! – Aravind S Jul 23 '18 at 11:26
@zenubeh your issues got fixed? – Aravind S Jul 23 '18 at 15:19
Yes the problem is fixed – zenubeh Jul 24 '18 at 21:21
If my answer helped, upvote and accept so it will be helpful for others who are looking for same type of questions..thanks! – Aravind S Jul 25 '18 at 02:20

score 0 · Answer 3 · edited Jul 23 '18 at 11:19

0

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

html {
  height: 100%;
}

edited Jul 23 '18 at 11:19

Jérémie Bertrand

3,025
3
44
53

answered Jul 23 '18 at 10:20

midnightgamer

444
1
5
18

score 0 · Answer 4 · answered Jul 23 '18 at 11:08

0

use

background-repeat:no-repeat;

and you can reduce code by using

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

answered Jul 23 '18 at 11:08

Suraj Libi

515
2
9

score 0 · Answer 5 · answered Jul 23 '18 at 12:53

0

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

answered Jul 23 '18 at 12:53

Anil Suwal Qode

110
5

Nacorga · Answer 6 · 2018-07-24T06:34:59.817

0

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

edited Jul 24 '18 at 06:34

answered Jul 24 '18 at 06:20

Nacorga

507
4
17

full img size in any screen size

6 Answers6