Фон шапки в мобильной версии отличный от полной версии

голоса: 0

Здравствуйте!

 

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

Если такое не возможно, как убрать из отображения мобильной версии вообще фон шапки, оставить только "background" с каким нибдуь цветом. Не хочу полностью убирать шапку, т.к. там находится основное меню сайта. Или может возможно оставить меню сайта однотонный фон и название... ковырял все, что связано с @media но так и не смог добиться нужного результата. Заранее спасибо!

Получается вот так:

полная версия

 

мобильная

 

Адрес сайта http://oosi-ra.ucoz.net/
Закрыто с пометкой: Вопрос решен!
| Автор: | Категория: Дизайн сайта
Закрыт | | Автор: Yuri_Geruk

Ответов: 1

Голоса: +1

Как пример, вопрос решить можно так, в таблицу стилей CSS прописать следующие стили:

@media screen and (min-width: 240px) and (max-width: 850px) { .header { width: 100%; height:300px; background: url('/header4.jpg') no-repeat 0%0%/100%; } }

| Автор:

Все шикарно, спасибо огромное!

Если не затруднит, подскажите, как в таком случае можно уменьшить "разрыв" на фоне кнопки "меню"? между логотипом и началом статей?

Общественное Мнение,

Попробуйте стили выше изменить на следующие:

@media screen and (min-width: 240px) and (max-width: 850px) { 
 .header {
 width: 100%;
 margin-bottom: -150px;
 background: url('/header4.jpg') 
 no-repeat 0% 0% /100%;
 } 
 .logo-wrap {height: 0;margin-bottom: -50px;}
}

это максимально что можно сделать в данной ситуации.

Yuri_Geruk,

К сожалению никаких изменений... (

А нельзя вообще не использовать шапку? только кнопку Меню и все?

Yuri_Geruk,
Более или менее решил вопрос с помощью "z-index" и сделал поверх всего в углу...
...