Адаптивная картинка background: как лучше сделать?

melkozaur
На сайте с 06.04.2010
Offline
505
1835

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

Как лучше сделать? Если делаю через background-image, картинка обрезается под высоту блока (т.е. грубо говоря под высоту меню). Если делать через position: absolute, то появляются всякие проблемы когда меняешь разрешение экрана.

Нужно чтобы:

1. Картинка в header была полностью видна, например 1000*400 пикселей. При уменьшении экрана - она должна ресайзиться под 100% ширины и по высоте автоматически.

2. Менюшка должна быть всегда внизу header поверх этой картинки.

Как сделать?

Или уже через table попробовать...

Серверы в NL/US со скидкой 30% нашим читателям: E5-2650v4/10GB DDR4/240GB SSD/1 Gbps - от $20: https://ua-hosting.company/vps/nl SEO без компромиссов: https://seoleaks.net SEOLEAKS - продвижение сайтов: https://www.instagram.com/seoleaks
tommy-gung
На сайте с 22.11.2006
Offline
277
#1

в зависимости от условий и фона чаще используется позиционирование фона: center top, center bottom, etc

ну и background-size, если необходимо

Здесь не могла быть ваша реклама
melkozaur
На сайте с 06.04.2010
Offline
505
#2

tommy-gung, фоновая картинка не показыватся на всю высоту, вот в чем проблема.

Z0
На сайте с 03.09.2009
Offline
737
#3
melkozaur:
tommy-gung, фоновая картинка не показыватся на всю высоту, вот в чем проблема.

Так а:

background-size: 100% 200px; background-position: top center;

Не подойдет? Не проверял, если что :)

Я не очень проблему понял, так что камнями не кидаться :)

tommy-gung
На сайте с 22.11.2006
Offline
277
#4
melkozaur:
tommy-gung, фоновая картинка не показыватся на всю высоту, вот в чем проблема.

есть background-size: cover;

можно для разных разрешений выводить разные фоны

melkozaur
На сайте с 06.04.2010
Offline
505
#5

Сам сайт на openserver сейчас. Вот создал пример, полностью как у меня сейчас:

https://jsfiddle.net/3ksy8zq7/

---------- Добавлено 07.03.2017 в 15:32 ----------

tommy-gung:
можно для разных разрешений выводить разные фоны

Хаха, нет, это точно не вписывается в мои представления о нормальном дизайне ))))

Z0
На сайте с 03.09.2009
Offline
737
#6

У меня через jquery примерто так же как вам надо, если я правильно понял:


$(window).resize(function(){
$('.header').height( $('.header').width()/8.364 );
});
window.addEventListener('orientationchange', function() {
$('.header').height( $('.header').width()/8.364 );
}, false);
$(document).ready(function(){
$('.header').height( $('.header').width()/8.364 );
});

То есть ширина/коэффициент

P.S. Вкупе с background-size: 100% 100%;

tommy-gung
На сайте с 22.11.2006
Offline
277
#7

так что ли нужно? https://jsfiddle.net/3ksy8zq7/4/

---------- Добавлено 07.03.2017 в 16:19 ----------

melkozaur:
Хаха, нет, это точно не вписывается в мои представления о нормальном дизайне ))))

ну почему же. зачем грузить фон шириной 1920px для телефонов, например?

totamon
На сайте с 12.05.2007
Offline
408
#8
melkozaur:
это точно не вписывается в мои представления о нормальном дизайне ))))

может пора представления менять))

была похожая проблема, дизайнеры понарисуют, а потом все должно масштабироваться куда-то... в итоге пришлось комбинировать для разных разрешений из 2х бекграундов, 3х картинок и бутстрап колонок... невозможно диз одинаково вписать и на 1920 десктоп и 320 мобилу.

Дедик от 3000р https://8fn.ru/sape | VPS в Москве https://8fn.ru/72 | Лучшие ВПС, ТП огонь, все страны! https://8fn.ru/inferno | ХОСТИНГ №1 РОССИИ https://8fn.ru/beget
melkozaur
На сайте с 06.04.2010
Offline
505
#9
tommy-gung:
ну почему же. зачем грузить фон шириной 1920px для телефонов, например?

Грубо говоря, да. Вообще для мобильников вообще будет другой header.

totamon:
может пора представления менять))

Спасибо, но я как-то не фанат делать по 100500 вариантов одной картинки. Это извращение.

A
На сайте с 23.11.2016
Offline
7
#10

Возможно требуется вот так сделать https://jsfiddle.net/jyskm2jo/1/

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий