Как сделать чтобы background-image не зумился?

Question

[Nikita]

Делаю сайт с помощью bootstrap.
У меня на одной части в сайте, на div сделан класс с background-image, и когда заходишь с телефона, дикий зум происходит.
Kак это исправить? чтобы и с десктопа выглядело норм и с телефона?

вот так это выглядит

.MainPage{
    background-image: url(/images/Group\ 2033.jpg);
    background-repeat: round;

}

Comments

[arzamas-nick]

Задать размер картинке наверное.

Answer 1

[KononovD]

Зум происходит из-за того, что картинка плохо подходит по размеру, очевидно)
Т.е. она растягивается по высоте, а сам браузер тянет ее и по ширине так, что бы сохранялись изначальные пропорции

вообще,

background: url("pass/to/img") no-repeat center / cover;

должен сделать приемлемую картинку)

Comments

[Nikita]

вот когда делаю так, он шакалится дико

[KononovD]

Никита, ну покажите скрины, что ли)
Я же не экстрасенс) давайте говорить более предметно

[Nikita]

вот как это выглядит с вашим советом)

Шакалит, хотя картинка у меня в хорошем качестве.

[Nikita]

а вот сама картинка

[KononovD]

Никита,
https://codepen.io/Kononov_D/pen/Qodqww
вот

[Nikita]

KononovD, неа, не помогает :(
Теперь просто блоки уезжают за картинку, хотя они в ней находятся

[Nikita]

KononovD, может я не правильно что-то делаю? у меня просто навбар и все вверхние дивы находятся в этом классе, я его чисто для фона сделал

[KononovD]

Никита, залейте то, что есть на гитхб или перенесите свой код в codepen и дайте ссылку, попробую вам помочь

[KononovD]

Никита, так что там в итоге было?

[Nikita]

KononovD, в итоге я сделал так background: url(/images/Group\ 2033.jpg) no-repeat center / cover ;

и просто подогнал вниз правую часть)
с картинкой проблемы все-таки)
Спасибо за помощь

[KononovD]

Никита, а то, что у вас в url передается не строка - то так и должно быть?) я чего-то не знаю?

з.ы.
no-repeat (background-repeat)
center (background-position)
cover (background-size)
на всякий случай)

[Nikita]

KononovD, Да)) у меня все гуд отображается, я хз как это работает) но это за меня VS Code делает))

Answer 2

[Талян]

.MainPage{
background: url(/images/Group\ 2033.jpg) no-repeat center;
 background-size: cover;
}

Comments

[Nikita]

Все кулл, но он просто дичайше шакалится))

[Талян]

Никита, к сожалению не видя всей страницы не смогу понять что не так =(

[Nikita]

вот такой вид после изменений

[Nikita]

а вот сама картинка

[Талян]

Никита, ну поиграйтесь с параметрами no-repeat center
и background-size: cover;