Фоновое изображение на теле - изображение имеет увеличение - PullRequest
Новая
       18

Фоновое изображение на теле - изображение имеет увеличение

0 голосов
/ 24 мая 2019

Я бы хотел разместить фоновое изображение на элементе тела, чтобы растянуть его на весь экран браузера.

Проблема в том, что при этом изображение получает некоторый «зум», и из-за этого изображение обрезается.

Например, давайте возьмем это текущее изображение:

http://www.baltana.com/files/wallpapers-15/Pug-Dog-HD-Wallpapers-38933.jpg

И посмотрите, как его масштабируют и обрезают некоторые части вокруг.

Я пытался поиграть с функциями обложки CSS-фона, но безуспешно. 

body {
  background-image: url('https://i.stack.imgur.com/7xThY.jpg');
  background-size: cover, 100%;
  background-position: 50% 50%;
  background-attachment: fixed;
}

Ответы [ 3 ]

0 голосов
/ 24 мая 2019 

body {
  background-image: url('https://i.stack.imgur.com/7xThY.jpg');
  background-size: 100vw 100vh;
  background-position: 50% 50%;
  background-attachment: fixed;
}
вероятно, это то, что вы ищете!но это изменит соотношение сторон изображения!
0 голосов
/ 24 мая 2019

Вы имели в виду что-то подобное? 

html{
    min-height:100%;
    position:relative;
}
body {
    height: 100%;
    background-image: url('http://www.baltana.com/files/wallpapers-15/Pug-Dog-HD-Wallpapers-38933.jpg');
    background-size:  contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

Я не поместил его во фрагмент, потому что код не работает в нем. Я попробовал это в Chrome, Firefox, Edge и даже Internet Explorer, и, кажется, работает нормально. надеюсь, это поможет.

0 голосов
/ 24 мая 2019

Попробуйте это может работать 

 <html>
        <head>
            <title>This is a test page</title>
            <style>
                body {
                background-image: url('http://www.baltana.com/files/wallpapers-15/Pug-Dog-HD-Wallpapers-38933.jpg');
                background-size: 100%;
                backgroun-reapeat:no-repeat
                }

            </style>
        </head>
        <body>

        </body>
    </html>
...