如何获得 100% 高度的背景图像覆盖？

Question

I'm using an image with a height of 5000px, and i want make it always appear 100% in width and height to cover the background, in mobile and desktop.

.main {
  position: relative;
  background: url('../images/background.png') no-repeat top center; 
  background-size: cover;
  width: 100%;
}

This code does not work, it makes her not to appear. I always need to set a height, and the problem is that the mobile's height is different from the desktop.

So you could say.. 'you can set height: 100%'.. and I did .. but nothing happens, the image doesn't appear, only if i set with pxs.

Answer 1

UPDATE

I feel urged to update my answer since I apparently understood the question the wrong way. I'll leave the old version at the bottom since apparently a lot of people found it helpful even though it failed to answer the original question.

Since your background image is repeating itself, I'll assume you don't want the whole image, just whatever height you need. So, you need 2 things:

1. set a height on .main
2. get rid of background-size altogether

So, this should actually work for you:

.main {
  position: relative;
  background: url('../images/background.png') no-repeat top center; 
  width: 100%;
  height: 100%;
}

If my assumption is correct, there's 1 more thing: you don't need a background over 5000px high to achieve your goal, just reduce it to 1px height (ie 1 line of your desired background) and change your css to:

.main {
  position: relative;
  background: url('../images/background.png') repeat-y top center; 
  background-size: cover;
  width: 100%;
}

I hope this helps

OLD VERSION

Your .main has no height and height:100%; doesn't work because the elements containing it have no height themselves.

One possible solution would be to add this:

html, body, .main {
  height:100%;
}

This might be exactly what you need, but you may also run into other problems with this solution. It all depends on what you're actually trying to achieve.

Other possible solutions:

Use viewport units

.main {
  height:100vh;
}

Please be aware that some mobile devices interpret these differently from what you'd expect.

Add the background to the body itself

body {
  background: url('../images/background.png') no-repeat top center; 
  background-size: cover;
}

As I wrote before: It's difficult to tell which solution is the best, it depends on your goal.

Answer 2

Have you tried adding this style?

html, body{ height: 100%;}

Then adding a height:100%; to your .main div

Answer 3

You are working with background-image... Keep in mind that the size of the rendered image has nothing to do with the image it self, but with the element created to contain it.

Now, if you want your image to appear at 100% height and width you can use the property background-size: contain , instead of cover. This will tell the browser that your image should not be cropped (as long as you have a height set for the .main element).

It seems to me, that the kind of effect you want is easier done if you just use the <img> tag instead of css background.

Answer 4

I had a issue about flex box can`t fit the background height, and the code below suited for me. The rest background-size,repeat and position depends on yours.

html{
    height:auto;
}
body{
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}