Как установить фоновое изображение полной высоты на большую ширину экрана? - PullRequest
Новая
       266

Как установить фоновое изображение полной высоты на большую ширину экрана?

0 голосов
/ 06 марта 2019
  • я поместил файл .svg в качестве фонового изображения.
  • на маленьком экране это было нормально, но когда я показываю на большом экране, оно было вырезано сверху и снизу
  • iхочу показать фоновое изображение в полную высоту / ширину как исходный размер на большом и полном экране

демонстрационное изображение

in large screen

- вот мой код 

.bg {
  width: 100%;
  height: 540px;
  background-image: url(http://inheritxdev.net/Design-Projects/perfit_home/images/OnePager-Header.svg);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     position: relative;
     float: left;
     width: 100%;
     border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

</style>
</head>
<body>

<p>Resize the browser window to see the effect.</p>

<div class="bg"></div>

</body>
</html>

Ответы [ 2 ]

1 голос
/ 27 марта 2019

Вы должны сделать div height = pageHeight (высота заголовка и соответствующие поля должны быть минус). 

.bg{
    width: 100%;
    height: calc(100vh - (2em + 18px)); /* p tag margin = 2em(1em top, 1em bottom ; p tag height = 18px) */
    background-image: url(https://images.unsplash.com/photo-1535498730771-e735b998cd64?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80); /* I changed an image because your image not showing in the playground */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    float: left;
    border: 1px solid red;
    box-sizing: border-box;
}
<p>Resize the browser window to see the effect.</p>
<div class="bg"></div>
0 голосов
/ 06 марта 2019

Думаю, это связано с размером фона. Может быть, это работает лучше для вас? (практически то же самое, кстати, если contain не то, что вы хотите, попробуйте cover. 

background-size: contain;
background-repeat: no-repeat;
background-position: center;

Не могли бы вы показать, что вы хотите с изображением.

...