Как убрать повторяющийся фон?

0 / 5

Автор: Администратор

01.08.2015

Теги: css, background-repeat, no-repeat, repeat-x, repeat-y

В этой статье мы расскажем как избавиться от повторяющегося фонового изображения у слоя.

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

Это происходит потому, что по-умолчанию для фоновых изображений задается свойство, которое заставляет повторятся изображение по горизонтали и вертикали.

Чтобы выключить дублирование фонового изображения используйте свойство background-repeat со значением no-repeat. Если вы хотите оставить повторение только по горизонтали или вертикали, тогда используйте свойство repeat-x или repeat-y соответственно.

Рассмотрим пример разных вариантов повторения фонового изображения:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Страница</title>
    <link rel="stylesheet" href="/../css/template.css" type="text/css" />
</head>
<body>
	<p>Повторяется по вертикали и горизонтали:</p>
	<div></div>
	<p>Повторяется по вертикали:</p>
	<div class="repeat-y"></div>
	<p>Повторяется по горизонтали:</p>
	<div class="repeat-x"></div>
	<p>Не повторяется:</p>
	<div class="norepeat"></div>
</body>
</html>

div {
	width:400px;
	height:200px;
	background-image: url('/../images/smile.png');
}

	div.repeat-y {
		background-repeat:repeat-y;
	}
	
	div.repeat-x {
		background-repeat:repeat-x;
	}
	
	div.norepeat {
		background-repeat:no-repeat;
	}

Результат вы можете посмотреть на демо-странице:

Добавить комментарий

Авторизоваться с помощью:

Поиск по сайту

Топ 10 активных пользователей

Имя пользователя Баллы
gawk
44.20
ZOMRO
30.60
hr@proovelab
15.00
intuit89
8.40
Varvarka
4.00
Akyla58
3.00
AnnaOl
3.00
dimasik_3557
3.00
ErcardSa
3.00
Galinamuh
3.00

Рекламные ссылки

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

Похожие материалы

Языки программирования сайтов Просмотров 15671

Приветствую всех посетителей моего сайта. В этой статья я расскажу вам о языках программирования, которые нужны для управления, созданий и разработки своего сайта.

Теги:

css, html, javascript, php, веб

Комментариев: 0 Подробнее

Удобное собрание CSS хаков для самых поп... Просмотров 10631

Удобное собрание CSS хаков для самых популярных браузеров

Для каждого хорошего верстальщика в какой-то момент времени встает вопрос кроссбраузерности. Что такое кроссбраузерность? Это свойство сайта или дизайна сайта отображаться одинакого в разных барузерах. Дело в том, что при создании браузеров разработчики не сильно задумываются о стандартизации, это порождает разное представление одного и того же сайта в их продукции. Создание кроссбраузерной верстки/сайта и позволяет преодолеть эту разницу.

Теги:

css, хаки, hacks, читы

Комментариев: 0 Подробнее

!important в CSS Просмотров 3960

Часто бывает, что люди, давно изучающие CSS, не имеют представления или не понимают до конца как работает директива !important в CSS. В этой статье я постараюсь описать её действие и показать пару примеров, такая статья так же пригодится тем, кто только начал изучать CSS.

Теги:

css, css3, style, !important

Комментариев: 0 Подробнее

Как подключать свои шрифты на сайт, или ... Просмотров 6114