Задний фон

[Spray]

Парни помогите разобраться на компе смотрится нормально а на планшете, телефоне по другому смотрите скриншот,в  style.css

 

прописано следующее  

background: #000000 url(__tltaxi-forum.ru/uploads/img/taxi_mega.png) no-repeat 50% 0; /* tails: img-bg; */
background-size: 100%;

#ipbwrapper {
margin: 0 auto;
width: 90%; 
padding-top: 370px; /* tails: img-bg; */
}

может как то ещё можно выровнять? 

[Viktar83]

Картинка масштабируется при изменении размеров окна браузера, а padding у слоя #ipbwrapper задан жёстко.

 

Картинку растягивать и как-то смещать - не вариант, так как на ней расположен и логотип и контактные данные. Поэтому...

 

 

Варианты исправления:

 

1) Самый простой вариант:

 

задать  padding у слоя #ipbwrapper через %

padding-top: 27%; (примерно так, можно подобрать точнее)

И в принципе всё ). Но я бы ещё в фотошопе у картинки внизу сделал небольшой плавный переход-градиент к чёрному цвету - чтобы нижняя граница картинки не так бросалась в глаза.

 

2) Вариант чуть посложнее:

 

Вставлять картинку не через background а через тег <img>.

Т.е. в шапке после верхнего меню стоит слой с картинкой. Тогда высота слоя будет задаваться высотой картинки и меняться при изменении размеров окна. Тогда #ipbwrapper с padding-top: 0px будет всегда строго под картинкой.

 

3) Вариант сложнее:

 

Изначально планировать вёрстку по-другому: логотип отдельно, контакты - отдельно, картинка-фон - отдельно. Т.е. "мухи - отдельно, котлеты - отдельно". Тогда и логотип не будет никуда уезжать, и контакты можно текстом набрать (кстати - плюс для клиентов, чтобы в выдаче сразу видеть телефоны, не заходя на сайт) и т.д.

Кстати, рекомендую сместить картинку вниз на 30-36px, чтобы при уменьшении окна логотип не обрезался сверху: 

 

body {
font: normal 13px helvetica, arial, sans-serif;
position: relative;
background: #000 url(__tltaxi-forum.ru/uploads/img/taxi_mega.png) no-repeat 50% 36px;
background-size: 100%;
}

тогда

#ipbwrapper {
margin: 0 auto;
width: 90%;
padding-top: 30%;
}

результат:

 

в полноразмерном режиме:

 

[Spray]

Спасибо друг! выручил! тему можно закрыть