X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Помогите с Css, автомасштабирование картинки
sk0r
sk0r
Topic Starter сообщение 15.10.2009, 17:03; Ответить: sk0r
Сообщение #1


Частый гость
**

Группа: User
Сообщений: 89
Регистрация: 6.12.2008
Из: РФ
Поблагодарили: 13 раз
Репутация:   2  


В сss стоит такая строчка
div#contanier {background:url('***/RootBitMaping/TopBackGrownd.jpg') repeat-x;text-align:center;}

Подскажите пожалуйста, как сделать чтобы картинка TopBackGrownd.jpg автоматом меняла свою ширину под размер экрана?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
MobiX
MobiX
сообщение 15.10.2009, 17:09; Ответить: MobiX
Сообщение #2


Завсегдатай
*****

Группа: Active User
Сообщений: 607
Регистрация: 11.7.2008
Из: Самара
Поблагодарили: 149 раз
Репутация:   17  


body {background:url('***/RootBitMaping/TopBackGrownd.jpg') top center no-repeat;}

Либо, как вариант:
div#contanier {width:100%; background:url('***/RootBitMaping/TopBackGrownd.jpg') top center no-repeat;}

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

Сообщение отредактировал MobiX - 15.10.2009, 17:11


--------------------
Блог: logunoff.ru
Twitter: logunoff
ICQ: 231887598


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sk0r
sk0r
Topic Starter сообщение 15.10.2009, 17:22; Ответить: sk0r
Сообщение #3


Частый гость
**

Группа: User
Сообщений: 89
Регистрация: 6.12.2008
Из: РФ
Поблагодарили: 13 раз
Репутация:   2  


MobiX, ни первый ни второй вариант не помогли
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
boodooboo
boodooboo
сообщение 15.10.2009, 17:37; Ответить: boodooboo
Сообщение #4


Вся жизнь - игра. И я в нее играю
******

Группа: Active User
Сообщений: 1106
Регистрация: 30.12.2008
Из: Мурманск
Поблагодарили: 298 раз
Репутация:   31  


div#contanier {background:url('***/RootBitMaping/TopBackGrownd.jpg') repeat-x;text-align:justify;} - может быть так?


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
kronos
kronos
сообщение 15.10.2009, 17:45; Ответить: kronos
Сообщение #5


Белый веб-мастер
*******


Группа: Active User
Сообщений: 4703
Регистрация: 10.2.2009
Из: Харьков
Поблагодарили: 2629 раз
Репутация:   327  


Помоему, только javascript


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
WuWu
WuWu
сообщение 15.10.2009, 18:05; Ответить: WuWu
Сообщение #6


Участник
***

Группа: User
Сообщений: 185
Регистрация: 18.3.2009
Поблагодарили: 161 раз
Репутация:   13  


смотря что какой именно бэкграунд, вот интересный пример реализации __design-mania.ru/web-design/html-css/css-large-background/


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sk0r
sk0r
Topic Starter сообщение 15.10.2009, 18:35; Ответить: sk0r
Сообщение #7


Частый гость
**

Группа: User
Сообщений: 89
Регистрация: 6.12.2008
Из: РФ
Поблагодарили: 13 раз
Репутация:   2  


(boodooboo @ 15.10.2009, 17:37) *
div#contanier {background:url('***/RootBitMaping/TopBackGrownd.jpg') repeat-x;text-align:justify;} - может быть так?

к сожалению тоже не сработало
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
skatadov
skatadov
сообщение 15.10.2009, 20:01; Ответить: skatadov
Сообщение #8


Новичок
*

Группа: User
Сообщений: 35
Регистрация: 27.12.2008
Поблагодарили: 18 раз
Репутация:   8  


(sk0r @ 15.10.2009, 17:03) *
В сss стоит такая строчка
div#contanier {background:url('***/RootBitMaping/TopBackGrownd.jpg') repeat-x;text-align:center;}

Подскажите пожалуйста, как сделать чтобы картинка TopBackGrownd.jpg автоматом меняла свою ширину под размер экрана?


Да никак вы обычную картинку не растяните таким образом. Только зациклите.
Если это повторяющийся фон - то используйте repeat-x
Если просто картинка - то не background-ом делайте, а img вставляйте в код - задавайте ему ширину 100%. Но качество отображения будет, мягко говоря, хромать


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sk0r
sk0r
Topic Starter сообщение 15.10.2009, 20:41; Ответить: sk0r
Сообщение #9


Частый гость
**

Группа: User
Сообщений: 89
Регистрация: 6.12.2008
Из: РФ
Поблагодарили: 13 раз
Репутация:   2  


skatadov, я тоже пришёл пришёл к этому решению, просто думал что можно это сделать через css
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
isleman
isleman
сообщение 16.10.2009, 21:18; Ответить: isleman
Сообщение #10


Бывалый
****

Группа: User
Сообщений: 408
Регистрация: 16.10.2009
Из: НН
Поблагодарили: 83 раза
Репутация:   16  


(sk0r @ 15.10.2009, 20:41) *
skatadov, я тоже пришёл пришёл к этому решению, просто думал что можно это сделать через css

можно, просто здесь нужно сделать два слоя, и картинку нельзя будет замостить вниз
<body>
<img id="layer1" src="TopBackGrownd.jpg">
<div id="layer2">
</div>
</body>

стили будут такими
#layer1
{
display:block;
position:relative;
left:0;
top:0;
z-index:10;
width:100%;
}
#layar2
{
position:relative;
left:0;
top:0;
z-index:20;
width:100%;
}

но как правильно заметил skatadov картинка будет маштабироваться браузером а это не самый лучший вариант

ещё можно сделать не маштабирование, а выплывание краёв при увеличение ширины экрана, но как я понял это вам не нужно


--------------------
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Помогите выбрать ноутбук
Ноутбук для детей
14 kstnews 294 Сегодня, 3:34
автор: anchous
Открытая тема (нет новых ответов) Проги для редактирования style.css
14 minutkin 1075 11.12.2017, 16:01
автор: Nell
Открытая тема (нет новых ответов) Помогите выбрать программу
Помогите выбрать программу
11 impak 1356 11.12.2017, 13:11
автор: Mikki
Открытая тема (нет новых ответов) Помогите найти плагин на WP
Отзывы с профилей соц сетей
1 SEOMR 448 30.11.2017, 7:18
автор: Nell
Открытая тема (нет новых ответов) Помогите найти проблему
Долгий ответ сервера
6 maxim1249 702 29.11.2017, 17:27
автор: genjnat


 



RSS Текстовая версия Сейчас: 18.12.2017, 3:50
Дизайн