Свойство background-repeat
CSS свойство по умолчанию background-image повторяет изображение как по горизонтали, так и по вертикали.
Некоторые изображения следует повторять только по горизонтали а некоторые по вертикали, иначе они будут выглядеть странно, вот так:
body{
background-image: url("gradient_bg.png");
}
Попробуйте сами »
Если изображение повторяется только по горизонтали установите свойство (background-repeat: repeat-x;), фон будет выглядеть лучше:
body{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Попробуйте сами »
Совет: Чтобы повторить изображение по вертикали, установите свойство background-repeat: repeat-y;
CSS background-repeat: no-repeat
Отображение фонового изображения только один раз также задается свойством background-repeat:
Показать фоновое изображение только один раз:
body{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Попробуйте сами »
В приведенном выше примере фоновое изображение помещается в том же месте, что и текст. Мы хотим изменить положение изображения, чтобы оно не слишком мешало тексту.
CSS background-position
Свойство background-position используется для указания положения фонового изображения.
Расположите фоновое изображение в правом верхнем углу:
body{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Попробуйте сами »