Свойство background-repeat в CSS используется для повторения фонового изображения как по горизонтали, так и по вертикали. Он также решает, будет ли фоновое изображение повторяться или нет.
Для того, чтоб выключить дублирование картинки, то здесь задействуем свойство background-repeat со значением no-repeat. Если вы хотите оставить повторение только по горизонтали или вертикали, тогда используйте свойство repeat-x или repeat-y соответственно.
Как пример:
HTML
Код
<!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>
CSS
Код
div {
width:400px;
height:200px;
background-image: url('http://zornet.ru/_fr/83/2539077.jpg');
}
div.repeat-y {
background-repeat:repeat-y;
}
div.repeat-x {
background-repeat:repeat-x;
}
div.norepeat {
background-repeat:no-repeat;
}
