Question

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

 

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

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

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

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

 

мобильная

 

Answer 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%; } }

Comments

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

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

---

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

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

@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" и сделал поверх всего в углу...