С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.57/7: Рейтинг темы: голосов - 7, средняя оценка - 4.57
sergey1317
0 / 0 / 0
Регистрация: 14.09.2010
Сообщений: 2
1

Как расятнуть фон на стрнице? (css)

17.09.2010, 21:11. Просмотров 1253. Ответов 2
Метки нет (Все метки)

Есть картинка с градиентом, с двумя еле заметными полосками снизу, сверху и тенью снизу.

Как расятнуть фон на стрнице? (css)


Нужно сделать её растягивающимся фоном (!), учитывая что нижние и верхние полоски должны полюбому быть как на оригинале-снизу и сверху, и обовъязково тень снизу.

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

Ещё момент: картинка находится по центру экрана, занимая собой всю площадь от правого края экрана до левого, а снизу и сверху при любом разрешении должны оставаться зазоры примерно 10-15%.

Решение желательно в div, если нет-то в таблицах или javascript.

PS, Уже резал её на части, пытался присобачить одно к другому-всё равно когда растягивается то по кривожопому получается Помогите пожалуйста.
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
17.09.2010, 21:11
Ответы с готовыми решениями:

Как создать фон сайта с помощью CSS и где почитать про использование CSS
Как создать фон сайта с помощью CSS, приведите пример пожалуйста. И если будет...

Как добавить фон в css?
<style> div.ten{ background-image: url(2/111.png) repeat-y; } ...

HTML, CSS, как изменить фон страницы
Товарищи! Хелп! Имеется банальный ползунок на хтмл. Нужно сделать, чтоб...

Как сделать такой задний фон? (CSS)
Как сделать задний фон как на фото через css, то-есть, что бы цвет был голубым,...

Как сделать на css прозрачный фон, как у картинки?
Посмотрите на вложенную картинку. Сверстал тексты, форму, но как в css сделать...

2
Red Planet
49 / 10 / 3
Регистрация: 20.09.2009
Сообщений: 263
18.09.2010, 17:51 2
Лучший ответ Сообщение было отмечено как решение

Решение

sergey1317, из сообщения я понял, что вы хотите создать блок с фоном-градиентом, высота этого блока будет около 80%, сверху и снизу будут полоски-бордюры. Правильно?

В таком случае вот решение.
CSS
1
2
3
4
5
6
7
#container {
    height: 80%;
    margin: 10% 0;
    border-bottom: #000 2px solid;
    border-top: #000 2px solid;
    background: url(bg.png) repeat-x #d5e3ee;
}
HTML5
1
2
3
4
<body>
    <div id="container">
    </div>
</body>
О создании градиентов можете прочитать здесь.
bg.png - созданный в Photoshop'е градиент.
#d5e3ee - нижний цвет в переходе.
Сам градиент вложен.

P.S. Вложенное изображение не очень понятно мне. Если я понял вас неправильно, напишите сюда, в тему.
0
Миниатюры
Как расятнуть фон на стрнице? (css)  
sergey1317
0 / 0 / 0
Регистрация: 14.09.2010
Сообщений: 2
18.09.2010, 19:08 3
Основная часть картинки должна статично стоять на месте и не растягиваться. От картинки справа отрезается полоска шириной в 1 пиксель и каким-то образом дублируется по горизонтали при растяжении экрана вправо.

От этого же рисунка ПЕРЕД самым низом отрезается полоска в 1 пиксель высотой и повторяется при растяжении картинки вниз. А ниже этой повторяющейся полоски добавляется нижняя часть картинки с тенью. (там на самой картинке есть полоска почти в самом низу, которая полюбому должна быть снизу).

И ещё момент-картинка как-то должна тянуться вправо-вниз (по диагонали). Для этого мне кажется надо вырезать из правого угла почти снизу 1х1 пиксель и сделать так, что бы он дублировался.

Мне кажется так надо, но я не шарю как это сделать
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
18.09.2010, 19:08

Как фон скейтбордиста заменить на собственный без ущерба для css?
Как фон скейтбордиста заменить на собственный без ущерба для css? А то бывает...

Фон в css
Доброго времени суток помогите с такой проблемой делаются вкладки, задаю фон...

фон и CSS
Доброго дня. Знаю, что таких тем тут было много уже, но примеры из них не...


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

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

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