картинка шапки во всю длину

Дорогие форумчане помогите пожалуйста.

пытался изменить шапку шаблона JA Purity сайт http://eagida.ru/ удалил всё лишнее и никак не могу понять как мне растянуть шапку по всему экрану и какой размер картинки должен быть .
Пытался найти в поиске но не смог разобраться

Код (PHP):

1. /* HEADER
2. --------------------------------------------------------- */
3. #ja-headerwrap {
4.        width: 602px;
5.     background: url(../images/header.png) no-repeat top center;
6.     color: #CCCCCC;
7.     line-height: normal;
8.     height: 80px;
9. }
10.  
11.  
12. /* Search */
13. #ja-search {
14.     padding-left: 20px;
15.     background: url(../images/icon-search.gif) no-repeat center left;
16.     position: absolute;
17.     bottom: 15px;
18.     right: 0;
19. }
20.  
21. #ja-search .inputbox {
22.     width: 120px;
23.     border: 1px solid #333333;
24.     padding: 3px 5px;
25.     color: #999999;
26.     background: #444444;
27.     font-size: 92%;
28. }

 

У Вас резиновый шаблон, поэтому сказать, какого размера должна быть картинка сложно. Я бы предложила сделать ее выше, т.е. не 80px, а где-то 120-150px, ширину картинки сделать 960px. Еще сделать цвет фона таким же, как и на картинке, чтоб скрыть границы изображения.

Код (CODE):

1. #ja-headerwrap {
2.     [B]width: 960px;
3.     height: 150px;[/B]
4.     background: url(../images/header.png) no-repeat top center;
5.    [B] color: #FFFFFF;  [/B]      
6.     line-height: normal;
7. }

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

 

я поменял картинку на другую расширением в 1000 на 232

теперь код выглядит так

Код (PHP):

1. #ja-headerwrap {
2.        width: 1000px;
3.     background: url(../images/video2.jpg) no-repeat top center;
4.     color: #CCCCCC;
5.     line-height: normal;
6.     height: 232px;

но картинка так и не растянулась во всю длину

 

пытался сделать так

Код (PHP):

1. #ja-headerwrap {
2.        width: 100%;
3.     background: url(../images/video2.jpg) no-repeat top center;
4.     color: #CCCCCC;
5.    line-height: normal;
6.     height: 232px;

но так тоже не получилось

 

Чтоб она растянулась, нужно ширину в процентах поставить.

Код (CODE):

1. #ja-headerwrap {
2.         width: 100%;
3.     background: url(../images/video2.jpg) no-repeat top center;
4.     color: #CCCCCC;
5.     line-height: normal;
6.     height: 232px;

Но в таком случае изображение исказится!

 

так тоже ничего не получилось

 

На самом деле не пойму, почему не растягивается картинка. Но даже если и получится, изображение ведь исказится?
P.S. Спасибо за плюсик

 

вот и я не пойму почему оно не растягивается

 

удалил, не получилось

 

вроде я приближаюсь к истине сделал так

Код (PHP):

1. #ja-headerwrap {
2. background: url(../images/video2.jpg) no-repeat top center;
3. background-size: 100%;
4. color: #CCC;
5. line-height: normal;
6. height: 232px;
7. }

теперь ширина растянулась но при изменении масштаба картинка остается неподвижна а всё остальное меняется

 

результат появился после добавления background-size: 100%;

 

всё получилось всем большое спасибо

добавил background-size: 100% 100%;

и всё пошло

 

У меня есть для Вас решение!
В index.php шаблона заменить этот код

Код (PHP):

1. <div id="ja-headerwrap"> </div>

на этот

Код (PHP):

1. <div id="ja-headerwrap">
2.     <div class="left"><div class="right"></div></div>
3. </div>

В CSS шаблона вставить

Код (CODE):

1. /* HEADER
2. --------------------------------------------------------- */
3. #ja-headerwrap {
4.     background: url(../images/video4.jpg) repeat-x top left;
5. }
6. .left {
7.     position:relative;
8.     background: url(../images/video1.jpg) no-repeat top left;
9.     color: #CCCCCC;
10.     line-height: normal;
11.     height: 232px;
12. }
13. .right {
14.     position:relative;
15.     background: url(../images/video3.jpg) no-repeat top right;
16.     color: #CCCCCC;
17.     line-height: normal;
18.     height: 232px;
19. }

Картинки прилагаются

P.S. Так все элементы на шапке не будуть искажаться при изменении ширины сайта!

 

оно и не растянется
#ja-headerwrap {
width: 100%;
Это ты задаёшь ширину контейнера, в котором изображение.
А сама картинка и не будет растягиваться, так как no-repeat, даже если сделать чтобы растягивалась,
будет дублироваться.

 

У Вас же картинка искажается?

 

большое спасибо щас попробую, картинку только сначала другую сделаю, данная картинка тестовая

 

а вы из какого браузер смотрите у меня в хроме всё путём

 

Тут скорее не в браузере дело, а в разрешении экрана. У меня 1600х900 и она уже в ширину растянулась. Смотрится то нормально, но все же это не совсем корректное решение, как на мой взгляд. Ведь неизвестно, что с ней будет, если у пользователя будет монитор с разрешением 2048×1536