Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.67/15: Рейтинг темы: голосов - 15, средняя оценка - 4.67
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
1

резиновый бэкграунд

30.06.2014, 13:23. Показов 2878. Ответов 11
Метки нет (Все метки)

Добрый день, как правильно задать стили контейнеру и бэкграунду. Если сам бг размеров hd 1920 x 500 , как сделать чтобы с 800пх то 1920 тянулся бэкграунд , и чтобы сам контейнер тянулся от содержимого?
0

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
30.06.2014, 13:23
Ответы с готовыми решениями:

Как сделать резиновый фон шапки и резиновый фон меню?
Как сделать резиновый фон шапки и резиновый фон меню?

Бэкграунд таблицы
Когда вставляешь текст на бэкграунд(бэкграунд - картитнка), то бэкграунд отображается по мере его...

Прозрачный бэкграунд
Как сделать прозрачный бэкграунд буз потери прозрачности, а именно есть див (30% прозрачности),...

бэкграунд картинка
подскажите новичку: как сделать такой вот бэкграунд: у меня есть изображение шириной 2000 px...

11
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
30.06.2014, 13:26  [ТС] 2
CSS
1
2
3
4
5
6
7
.tablet-news {
    background:url(../img/header/large_news_bg.png) no-repeat;
    background-size:contain;
    overflow:hidden;
    height:auto;
    padding:30px;
}
пробовал так, background-size:1920px auto, не помогает
0
Миниатюры
резиновый бэкграунд  
332 / 308 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
30.06.2014, 13:55 3
background-size:cover; может? Вообще если я правильно понял, то, необходимо задавать минимальную ширину для вашего контейнера, что бы контейнер тянулся, уберите overflow
Если нужно обрезать текст, то оберните его в див и обрезайте его уже...
0
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
30.06.2014, 14:13  [ТС] 4
aj17, так тоже не тянется, contain, cover, background-size:1920px auto, это ничего не помогает


CSS
1
2
3
4
5
.tablet-news {
    background:url(../img/header/large_news_bg.png) no-repeat;
    background-size:cover;
    padding:30px;
}
0
332 / 308 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
30.06.2014, 14:26 5
А можете более подробнее написать что Вам именно нужно? Думаю там все очень просто...
0
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
30.06.2014, 14:43  [ТС] 6
хочу чтобы тянулась на весь экран бг, и был резиновым. Плюс чтобы в высоту тянулся от заполняемого контента
0
Миниатюры
резиновый бэкграунд  
102 / 102 / 39
Регистрация: 25.02.2014
Сообщений: 321
30.06.2014, 15:06 7
sendxt, ну во-первых бэкграунд от контента не растянется, а растянется только блок.
И если ты хочешь именно так как на картинке, то по моему там фиксированая высота и ширина блока с тем бэкграундом.
А что до бэкграунда, то присвой блоку:
CSS
1
2
3
4
-moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
0
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
30.06.2014, 15:17  [ТС] 8
killlfun, что вы имеете виду до бэкграунда? про содержимое блока в котором текст?

Добавлено через 5 минут
если я правильно понял вашу мысль? не получится так что-бы тянулся такой бэкграунд сделать? тоесть там сможет быть ограниченое количество текста?
0
102 / 102 / 39
Регистрация: 25.02.2014
Сообщений: 321
30.06.2014, 15:18 9
sendxt, я говорю присвой блоку где этот бэкграунд те значения.
Но сделай его с фиксированными размерами.
Но если он тебе нужен резиновый, то я не думаю что использовать такую картинку для бэкграунда самый лучший вариант.
По крайне мере, там где ты такое видел, он фиксированный, а не резиновый, мне кажется.
0
10 / 10 / 13
Регистрация: 25.04.2012
Сообщений: 1,156
30.06.2014, 15:29  [ТС] 10
killlfun, вы знаете как сделать такой фон резиновым? может с помощью css есть выход какой-то?
0
102 / 102 / 39
Регистрация: 25.02.2014
Сообщений: 321
30.06.2014, 15:48 11
sendxt,
ну вот я же писал, будет резиновым, если блоку с бэкграундом пропишешь:
CSS
1
2
3
4
-moz-background-size: 100%; /* Firefox 3.6+ */
    -webkit-background-size: 100%; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 100%; /* Opera 9.6+ */
    background-size: 100%; /* Современные браузеры */
Только же размеры блока тогда в процентах пиши.
1
332 / 308 / 168
Регистрация: 02.06.2014
Сообщений: 1,130
30.06.2014, 17:24 12
По моему все проще некуда, делаете, блок в котором фон, background-size:cover; даете ему min-width:800px; width:100%; height:500px;
В него кладете блок куда будете текст вставлять. Нужно понимать что фон тянется с прапорциональностью ширина на высоту, соответственно если блок шириной 1920px то высота будет масксимальной и равняться высоте картинки фона как я понял она у вас 500px, больше максимальной высоты фон тянуться не будет)
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
30.06.2014, 17:24

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Растянуть бэкграунд по высоте
Здравствуйте, форумчане! Не кидайтесь помидорками, пожалуйста, я знаю, что эта тема - давний...

зачем тут бэкграунд?
рассматриваю хтмл на начальном уровне! сейчас смотрю уроки одного чувака! плохих отзывов не было! ...

Множественный бэкграунд-колор
День добрый! Столкнулся с проблемной задачей, необходимо задать множественный фон в виде...

Бэкграунд картинка на половину
Всех приветствую ! Проблема такая картинка для фона на половину отображается и даже меньше чем...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.