Проблемы с шапкой

[Makoc]

Доброго дня, столкнулся со следующей проблемой
Установлена шапка, растянута по методу

Тыц

http://xenforo.info/threads/Растягиваем-шапку-на-всю-ширину.3619/

На мониторе отображает все прекрасно

Но получается следующий косяк на Retina ( Mac, Ipad)

Шапка уходит куда то.... В чем может быть косяк? Адаптивный дизайн отключен

Кашется догадываюсь в чем может быть трабла, подскажите... какой вообще стандартный должен быть размер шапки в ксене?

 

[Hope]

Привет. Тут изображение в svg формат бы конвертануть...

Так же имеется такой сервис:

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[Makoc]

Привет. Тут изображение в svg формат бы конвертануть...

Так же имеется такой сервис:

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

Я вообще столкнулся с проблемой следующего характера, картинка в шапке 1920*270 .. получается на широкоформатниках картинка отлично смотрится, а открыл на ноутбуке, все ушло... как сделать что бы она масштабировалась ксеней, или только пробовать через SVG ?

 

[Hope]

По нормальному-то конечно лучше все изображения юзать в svg, они масштабируемы и с ними можно делать, что угодно.

А так, можно попробовать в EXTRA.css добавить:

#logo img {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   margin: 0;
   background-size: 100% auto;
}

 

[Makoc]

По нормальному-то конечно лучше все изображения юзать в svg, они масштабируемы и с ними можно делать, что угодно.

А так, можно попробовать в EXTRA.css добавить:

#logo img {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   margin: 0;
   background-size: 100% auto;
}

Код не помог :(
Сейчас попробую перековертировать озображение, но уже честно не знаю что и делать
Конвертнул... эффекта нет ( айпад вообще отказался отображать шапку

 

[Skaiman]

Попробуй изменить код из темы растягивания:

#header
{
    @property "header";
    background-image: url('/styles/default/xenforo/logo1.gif');
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/styles/default/xenforo/logo1.gif', sizingMethod='scale');
            -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/styles/default/xenforo/logo1.gif', sizingMethod='scale')";
    @property "/header";
}

Замени background-position: center; на margin: 0 auto;
Время будет потестю, да и желание :-D

Нет, так не получается. Вот материал для ознакомления

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

 

[Makoc]

По нормальному-то конечно лучше все изображения юзать в svg, они масштабируемы и с ними можно делать, что угодно.

Подскажите плиз, каком вообще размером должен быть бэкграунд что бы он нормально отображался как на маленьком мониторе 15" так и на 24" .. уже с ног сбился как это сделать, т.е. у меня его то пережимает то растягивает..

 

[Skaiman]

Дело не в размере, дело в стиле CSS, правильно задать параметры, поставить заплатки для всех браузеров и ос. В данном случае, если делать как написал автор в ресурсе о растягивании шапки, в браузерах масштабируется все правильно, но вот на девайсах нет. Значит надо искать эти самые заплатки, выше были указаны ссылки, где их можно взять. Надо смотреть и пробовать. Согласитесь, если мне не нужна такая картинка в шапке, я и не буду париться, все в ваших руках :-)

Вот еще почитайте

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация

. В css, задается стиль для разных устройств, соответственно картинки тоже будут разные. Например:

/***** iPad Smaller than 959px *****/
@media only screen and (min-width: 768px) and (max-width: 979px) {
Здесь стили
}

или

/***** iPhone (landscape) *****/
@media only screen and (min-width: 480px) and (max-width: 767px) {
Стиль
}

С помощью медиа-запросов делаете стили для всех девайсов.
Вот еще про медиа-запросы

У Вас недостаточно прав для просмотра ссылок. Вход или Регистрация