Background size cover не работает

Не работает cover в background-size

Я работаю под FireFox последней версии, поэтому -moz-background-size:cover; не использую, который нужно было использовать до версии 4.0 FireFox.
В браузерах Хром, IE, при нахождении файла-фона в каталоге рядом со страницей, и при изображении jpg или png – вид тот же: ширина во весь экран, а по высоте показывается верхняя часть фона (где-то 1/3 изображения или 1/4), при «background:url(‘img1.jpg’) 50% 50% no-repeat;» — выводится средняя часть изображения. Как сделать полное изображение по вертикали?

Добавлено через 35 минут
Если имя файла картинки поместить в одинарные кавычки – то же самое.

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Background-size cover не работает
Фоновое изображение не хочет нормально адаптивиться, мне нужно чтобы высота изображения была.

Background-size: cover и contain. В чём разница?
Приветствую! Цитирую: cover Масштабирует изображение с сохранением пропорций так, чтобы его.

Background-size неправильно работает в Firefox
Вы скорее всего уверенны что я что то делаю не правильно. Конечно, ведь свойство не новое и хорошо.

Источник

background-size: cover — не правильно работает на мобильных девайсах

Здравствуйте, уважаемые знатоки! Такая проблемка: на некоторых мобильных девайсах, фон прорисовывается не полностью.

скрин: http://prntscr.com/781vxs В чем может быть проблема и как ее решить?

3 ответа 3

Попробуйте такой варинат

У меня заработало после того как я убрал свойство background-repeat: no-repeat; В принципе оно и не нужно при background-size: cover;

Обычно такое происходит, когда используется width: 100% у фоновой картинки или у родительского элемента. Т.к. такая ширина будет рассчитана на основе ширины экрана на устройстве в вашем случае.

На странице у вас видимо есть элемент, у которых width больше чем 100% (ширина экрана) и есть возможность прокрутить контент влево/вправо (может быть лишний padding или margin стоит, или фиксированная ширина у какого-то элемента есть).

Чтобы от этого избавиться добавьте min-width для фона равную минимальной ширине, которую хотите установить, или поправьте элементы, которые вылезают.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css3 адаптивная-верстка или задайте свой вопрос.

Похожие

Подписаться на ленту

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

дизайн сайта / логотип © 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.10.18.40487

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Источник

background-size: cover not working?

Width of image boxes is responsive

How to set the height to be responsive too? Like 50% of the screen?

If I do this change:

it’s not working

Thank you very much!

7 Answers 7

background-size: needs to come AFTER background: I don’t know if this is true of all browsers, but it’s certainly a feature of Chrome that can drive you crazy.

You need to use background-image property to define background image.

So this won’t work

because background is the shorthand code and takes default values for all omitted parameters.

But if you do this

This wil solve the problem.

The height of the div can be set using css height property, or (by default) by the height of it’s children elements. As the images are being set as background images the div is unable to determine the height it should be from that, and there is no pure css method of adjusting the height of a div to fit the dimensions of a background image. What you can do, is set the background images to be positioned in the centre of the div and have the background size as cover:

Positioning the background images as 50% 50% vertically and horizontally centres it in the containing div regardless of the dimensions of the div. That said, the image itself may crop at the edges if the aspect ratio of the div is less than the aspect ratio of the image (e.g. if the div is 30px wide and 10px high, and the image is 40px wide and 10px high, then the image is going to lose 5px from both sides).

This might be a bit late but in some cases it’s necessary to add background-attachment: fixed; to get background-size: cover; working.

//in the style sheets

The image boxes are responsive, but this does not mean that the corresponding images are. For a more fluid and dynamic structure, I recommend using a framework that does the work for you, like Bootstrap.

In the latest version of Bootstrap you could use the following code to make a responsive image (both in width and height):

Источник

background-size: cover not working on iOS

This is my code:

It’s working on desktop, iPad and Android mobile:

On Chrome and Safari on iPhone, the background is too big:

7 Answers 7

This happens, particularly on iOS, when you have background-attachment:fixed . On mobile, I usually put background-attachment:scroll inside of a @media query.

As @RyanKimber pointed out, fixed attached images use the whole size. On mobile this can get really tall which blows your image out. Setting the attachment back to scroll allows your cover image to stretch within its own container.

Elaborating on Ryan’s answer, without adding any new html node or using @media queries, using only one css.

If you want to keep a cover sized fixed background on all the devices including iOS, without adding a new node, then the trick is to do the fixed positioning on the element (body) itself and not the background, since a fixed background and cover sizing messes up iOS.

It works in production like a charm on iOS as well: https://www.doklist.com/

This code won’t work, since iOS uses the hight of the document and not the viewport :

Now this is the magic, the body:after is fixed, and not the background:

I could have used the body itself, with «position:fixed;overflow-y:scroll», but I didn’t want to mess with the positioning of the body and my overall layout.

So doing this on the body:after is a very easy fix. I have tested the solution on Mac, and iOS with firefox, safari, chrome.

Источник

Трабл с фоном в css, background-size: cover обрезает картинку по высоте

Что я только не делал и размеры картинки вводил, background-attachment: contain показывает всю картинку целиком, но фоновая картинка в этом случае не растягивается по всему экрану, а как только ввожу background-size: cover, то картинка растягивается по ширине, но обрезается по высоте, скролл работает по оси х и у, но вот картинка обрезается по высоте.

Помогите решить проблему, мне нужно чтобы картинка не обрезалась в высоту и скроллом прокручивалась та часть, которая не влезает в высоту

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Не работает cover в background-size
Проверка background-size: cover 5 1

Пишу сказать, что проблему решил, прописав код :

И всё заработало как надо, но мне кажется, что есть другие более грамотные решения этой проблемы.

Я знаю, что если поставить высоту 100%, то страница будет ограничена окном браузера, а если значение будет равняться пиксельной высоте фона, то фон будет обрезаться. Медиазапрос по высоте моего фона не решил мою проблему. Также
знаю, что надо было задать размер блока для отображения фона целиком, но моя задача состояла в том, чтобы на данном
этапе один только фон отображался целиком с сохранением всех пропорций со скроллом. Есть ли у кого идеи как можно
ещё более грамотно решить мою проблему, уверен есть и другие более грамотные способы.

Красивый background с зеленым фоном без картинки
Вот к примеру есть картинка . Как мне сделать что то похожее с background , но чтобы без.

Background-size сильно растягивает фон
Проблема заключается в том, что параметр background-size:cover сильно растягивает фон, т.е. больше.

Background-size c svg изображениями в safari
Здравствуйте! Кто-нибудь знает как заставить сафари правильно отображать svg в background? Вот.

Background-size неправильно работает в Firefox
Вы скорее всего уверенны что я что то делаю не правильно. Конечно, ведь свойство не новое и хорошо.

Как узнать размеры background-size: contain ?
Доброй ночи! Есть блок с background-size: contain. Размеры блока известны, размеры оригинальной.

Источник