Блоги | Статьи | Форум | Дамский Клуб LADY

Блог о блогахСоздан: 15.02.2008Статей: 14Автор: ВебмастерПодписатьсяw

Свойства фоновых изображений

Обновлено: 14.06.08 00:33 Убрать стили оформления

Есть рисунок, из которого хотелось бы сделать фон, повторяющийся по вертикали, но не повторяющийся по горизонтали, т.е., в данном случае, чтобы слева страницы шла полоска кошек.

img20080613111116.jpg

Для этого режем наш рисунок на две части: img20080613111019.jpg и img20080613111009.jpg. Из первой задаем общий фон страницы. Затем создаем таблицу и задаем ей не повторяющийся фон. Вообще для этого используется тег background-repeat, который может принимать следующие значения:
repeat-x заполняет страницу рисунком по горизонтали, от левого края к правому.
repeat-у заполняет страницу рисунком по вертикали, от верхнего края к нижнему.
no - repeat не повторяет рисунок при заполнении страницы.

Задать его, увы, можно только правкой непосредственно HTML-кода. Т.е. нужно щелкнуть кнопочку HTML code.jpg, найти нужную таблицу и вписать в её стиль фоновое изображения и его свойства background-repeat.

У вас должно получиться примерно следующее(только адрес рисунка, разумеется, будет ваш):

table style="background-image:url(https://lady.webnice.ru/forum/users/2/img20080613111009.jpg); background-repeat:repeat-y;" border="0" width="100%"

и выглядеть это будет так:

Текст

Текст

Текст

Текст

Текст

Текст

Текст

Текст

Текст

Текст

Текст

Текст

 

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

текст

текст

текст

текст

текст

текст

текст


Я указываю у границ рамку, чтобы была видна разница между вариантами. Т.е. во втором варианте ширина первой ячейки с фоном не должна превышать ширину рисунка, иначе он начнет повторяться, а в первом варианте ширина может быть любой.



Комментарии:
Поделитесь с друзьями ссылкой на эту статью:

Оцените и выскажите своё мнение о данной статье
Для отправки мнения необходимо зарегистрироваться или выполнить вход.  Ваша оценка:  


Всего отзывов: 6 в т.ч. с оценками: 1 Сред.балл: 5

Другие мнения о данной статье:


Июль [14.06.2008 00:40] Июль 5 5
Ага...ладно, будем пытаться...пыхтеть и разбираться. Мастер, спасибо!

Morning [14.06.2008 00:46] Morning
Мастер, спасибо!) чувствую, что еще немного с блогом помучаюсь и начну изучать html, добавлять те же ячейки таблицы гораздо удобнее именно в нем)) и потерявшийся курсор тоже!

Вебмастер [14.06.2008 12:20] Вебмастер
Да, Morning, рано или поздно к этому приходит каждый, кто не желает останавливаться на достигнутом. Но и визуальный редактор тоже освоить нужно, это первый и очень хороший шаг для изучения HTML. Я до сих пор иногда пользуюсь(обычно MS-FrontPage, раньше шел в составе MS-Office, сейчас, кажется, уже поставляется отдельно), когда нужно быстро набросать для сравнения и выбора несколько вариантов оформления или вообще вспомнить, как пишутся некоторые теги

Июль [14.06.2008 12:32] Июль
Блин. Я - чайник. Блондинка просто. Блин.

Morning [14.06.2008 13:00] Morning
Мастер, я не бросаю виз.редактор на пол пути, до сих пор львиная доля его возможностей для меня - тайна за семью печатями) но хтмл как-то легче в обращении, имхо )) Хотя, это наверное только на первый взгляд так кажется, чем больше узнаешь, тем больше вопросов возникает))Но вот вертикальный бордюр в своей новой статье делала именно в хтмл, спасибо за Ваши советы
Июля, я так выгорела из рыжего, что тоже почти блондой стала;))

Джулиана [14.06.2008 15:57] Джулиана
Ну что, придется еще одну прогу осваивать. %)

Посетители, комментировавшие эту статью, комментируют также следующие:
Вебмастер: Первое знакомство с визуальным редактором Светик: Латынь Jaden Nixe: My Galery Sinner: Как поставить картинку себе в подпись

Список статей:



Если Вы обнаружили на этой странице нарушение авторских прав, ошибку или хотите дополнить информацию, отправьте нам сообщение.
Если перед нажатием на ссылку выделить на странице мышкой какой-либо текст, он автоматически подставится в сообщение