Нужно сделать такой фон (Полоску фона (адаптивного) как на Рамблере про олимпиаду)

@popropusku · Регистрация: 19.10.2012

Студворк — интернет-сервис помощи студентам

Привет.
Нужно сделать такую полоску фона (адаптивного) как на Рамблере про олимпиаду http://www.rambler.ru/sochi/. Я так понимаю что это div с фоном, но не могу понять как...

@dolte · 13.02.2014, 09:25

уточните, какую полоску фона ?

@Taatshi · 13.02.2014, 10:10

popropusku, ширина 100%, выравнивание center top для бэка

@popropusku · 13.02.2014, 12:03 **[ТС]**

Сообщение от Taatshi

popropusku, ширина 100%, выравнивание center top для бэка

Вот такой фон http://postimg.org/image/ex7iz2a43/
А как быть с адаптивностью? я пробовал сделать как вы, Taatshi, говорите, но тогда фон не масштабируется а просто выводится частично

@Taatshi · 13.02.2014, 12:15

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

На том примере

CSS
1
2
background-size: cover;
background-position: center;

@popropusku · 13.02.2014, 12:37 **[ТС]**

А есть ли вариант решения моего вопроса, чтобы IE понимал и чтобы без косяков?

@Taatshi · 13.02.2014, 14:02

popropusku, я не вижу ВАШЕГО КОДА

@popropusku · 13.02.2014, 23:26 **[ТС]**

Сообщение от Taatshi

popropusku, я не вижу ВАШЕГО КОДА

Вот как-то так сделал...

CSS
1
2
3
4
5
6
7
8
9
#fon{
    width:100%;
    height:300px;
    background:url(img/fons/bg.jpg) no-repeat;
    background-size: cover;
background-position: center;
margin:50px 0 0 0;
    
    }

@Taatshi · 13.02.2014, 23:35

popropusku, и как, работает? Если нет - давайте Html блока и поясняйте что именно не устраивает.

@popropusku · 15.02.2014, 19:44 **[ТС]**

Сообщение от Taatshi

popropusku, и как, работает? Если нет - давайте Html блока и поясняйте что именно не устраивает.

Все получилось. Спасибо!
Есть еще вопрос:
вот этот сss код

CSS
1
2
3
    width: 16.6666667% - 12px; /* фолбэк */
    width: -webkit-calc(100% / 5 - 12px);
    width: calc(100% / 5 - 12px);

Понимает только Мозилла. Есть ли вариант для ie? чтобы от 16,6666667% отнималось 12px и это и была бы ширина...

@Taatshi · 15.02.2014, 19:59

popropusku, про поддержку можно почитать немного тут

http://htmlbook.ru/blog/zhemch... kciya-calc

@popropusku · 09.03.2014, 14:50 **[ТС]**

Спасибо. все получилось!

Новые блоги и статьи Все статьи Все блоги /
Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .

@popropusku 3 / 3 / 0 Регистрация: 19.10.2012 Сообщений: 128

	Нужно сделать такой фон (Полоску фона (адаптивного) как на Рамблере про олимпиаду) 13.02.2014, 01:43. Показов 1485. Ответов 11 Метки нет (Все метки) Привет. Нужно сделать такую полоску фона (адаптивного) как на Рамблере про олимпиаду http://www.rambler.ru/sochi/. Я так понимаю что это div с фоном, но не могу понять как... 0

@dolte Человек 331 / 205 / 63 Регистрация: 04.02.2013 Сообщений: 1,223
	13.02.2014, 09:25
	уточните, какую полоску фона ? 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	13.02.2014, 10:10
	popropusku, ширина 100%, выравнивание center top для бэка 0

@popropusku 3 / 3 / 0 Регистрация: 19.10.2012 Сообщений: 128
	13.02.2014, 12:37 [ТС]
	А есть ли вариант решения моего вопроса, чтобы IE понимал и чтобы без косяков? 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	13.02.2014, 14:02
	popropusku, я не вижу ВАШЕГО КОДА 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	13.02.2014, 23:35
	popropusku, и как, работает? Если нет - давайте Html блока и поясняйте что именно не устраивает. 0

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	15.02.2014, 19:59
	popropusku, про поддержку можно почитать немного тут http://htmlbook.ru/blog/zhemch... kciya-calc 1

@popropusku 3 / 3 / 0 Регистрация: 19.10.2012 Сообщений: 128
	09.03.2014, 14:50 [ТС]
	Спасибо. все получилось! 0