Почему не работает наложение?

Ivan Ivanovich, вот так + посмотрите, как сделал проявление вашего фона я:


Через transform, а не left, чтобы было производительнее.

Почему пропадает background?

Максим Головлёв, присмотритесь, FabiBoom всё верно написал.

Background-size cover для retina экранов?

ae0lian, прощаю и пишу ответ :))

Почему масштабируется изображение?

Ольга, совсем не понял, что вы имеете в виду. Можете показать на примере?

Почему масштабируется изображение?

Ольга.

вспомнила, img я уже пробовала но возникла проблема, что нужно сверху наложить текст, а на картинку он ни в какую накладываться не хотел

Вот это и есть касательно absolute.

Что делать, если не запускается Koala компилятор на WinXP?

LOL, Windows XP.

Предположу, что эта Koala использует NodeJS под капотом, который на Windows XP не поддерживается с версии 6. Эта ОС жива только для древних ПК, старых банкоматов (Windows XP Embedded), корпоративных машин и т. п.

P. S. А мне эта Koala так компилировала SCSS на MacOS в своё время, что я с огромной радостью удалил её нафиг.

Если в таблице много символов, можно поставить вместо большого текста его часть, а дальше многоточие?

На CSS и не во всех браузерах можно только кол-во строк ограничить:


Вот это свойство, если что, с примерами:
https://css-tricks.com/almanac/properties/l/line-clamp/

Поддержка свойства браузерами:
https://caniuse.com/#feat=css-line-clamp

Можно обрезать делать текст в одну строку, тогда это будет работать, начиная с IE11:
https://css-tricks.com/snippets/css/truncate-strin...

Ограничение по кол-во символов + кросс-брузерность — вам к JS.

Почему масштабируется изображение?

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

Если хотите, чтобы было автоматическое соотношение сторон, то делайте с помощью img, но тогда это будет блок и надо будет шаманить с absolute, чтобы разместить контент.

Background-size cover для retina экранов?

ae0lian, эх, наверное, несколько лет опыта в работе на рынок США действительно могут мне врать...

Ссылку на спецификацию такой работы с Retina можете дать для работы cover? Ибо где вы прочитали, что зачем-то какой-то размер фона с какого-то бока нужно ставить для этого, — я не знаю.

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  
  /* Тут ваш код для чистой retina, начинающейся от минимального размера viewport в два раза меньше физического */
  
}

Ссылка на статью.

Вот пример, где работает cover везде и безо всяких проблем. Проверяется это тем, что там две картинки на фон, первая с надписью X1 (обычная), вторая — с надписью X2 (retina). Везде background-size: cover. И всё работает:



На обычном экране грузит X1:



На экране, который проходит проверку retina — X2



Android Chrome тоже всё понимает и, если экран высокого разрешения, использует retina-вариант (X2):

Как можно сделать разный текст кнопки на разных разрешениях?

1. Скрипты.
2. Медизапросы (два span с разными текстами, показываете нужный в зависимости от разрешения).

Какой движок выбрать?

G1chy, вы ошибаетесь.

Какой движок выбрать?

Адаптивность
Нормальный вид ссылок.
Автопагинация.
Расширенная информация с фото на странице товара (как лендинг).

\( О_о)/

Да и куча другого. Либо вёрстка, либо снова вёрстка, либо же типичный функционал любой CMS.

Background-size cover для retina экранов?

ae0lian, вы, видимо, не совсем понимаете смысл Retina, связи разрешения картинки, экрана и масштабирования.

На Retina-экранах размер viewport в 2, 3, 4 или более раза меньше физического разрешения экрана, поэтому обычные картинки на них смотрятся размытыми, несмотря на то, что viewport может быть всего лишь, например 375px по ширине (iPhone XS) при реальном разрешении 1125px (в 3 раза больше), поэтому картинка должна быть в 3 раза больше, чтобы заполнить реальное разрешение без суб-пиксельного масштабирования.

Ставьте ссылку на ваш retinа-ресурс, и все у вас будет нормально + cover. Он же у вас с разрешением выше, чем обычный?

Как настроить показ всего текста во время загрузки веб-шрифтов FontAwesome?

Вы не так поняли смысл этих слов, альтернативы font-awesome нет и там не про это.

Прочитайте ответ Xdevelx, он все верно говорит.

Background-size cover для retina экранов?

ae0lian, у меня вопросы…

А зачем там вы указали ему размер, коли вы и так выбрали другой файл по ссылке в свойстве? Поставьте ваш cover туда. И зачем !important?

Background-size cover для retina экранов?

Что? Покажите код.

Как правильно выбрать Wiki движок?

Лучше и проще MedaWiki навряд ли найдёте. Все аналоги как минимум не легче в настройке и поддержке.

Как правильно добавить в DOM дерево 2 div?

Genri_Rus, а почему нельзя использовать нативный JS даже среди кода jQuery? Одно и то же по сути. Тем паче нативный код будет быстрее работать.

Как бы вы сверстали этот блок?

Сергей delphinpro, ну, собственно, это я как раз и дописал в ответ выше. Но это ещё большим костылём выходит, на мой взгляд.

Такая шняга есть на Stripe.com — там на absolute расположены такие кружки, но конечную позицию считает JS, чтобы не было столкновения.

Как бы вы сверстали этот блок?

Position absolute чистой воды.

Динамика — это уже к JS. Можно и не Isotope для сортировки, только он не будет так позиционировать.

Самый простой путь — прописать стили (размеры и позиции) с помощью :nth-child.

Если нужна сложная логика а-ля большие круги — важные посты, мелкие — менее важные, то тут уже больше проблема логики вывода, чем именно вёрстки.

Можно и на JS рассчитывать позицию, исходя из размеров блоков и из количества, но всё равно с точки зрения CSS — это absolute.

Можете, конечно, сделать ещё сетку обычную, а потом с помощью translate (или margin) сдвигать каждый блок в нужное место.