Фоновое изображение

Для какого либо элемента или страницы сайта в целом можно задать фоновое изображение с помощью свойства background-image параметром, которого будет ссылка на картинку.


background-image: url(путь к файлу)

Для контейнера <body> заданы свойства, которые отображают одну картинку по центру, а так же задан цвет фона.


CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    background-color: #543619;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-image: url(/img/background-image-css.jpg);
}

Для контейнера <div> с классом round-picture заданы свойства, ширины и высоты одного размера, свойство background-color выводит картинку, border-radius задаёт пятидесятипроцентное закругление, отступы сверху и снизу равные нулю, а справа и слева автоматические, что позволяет удерживать контейнер посередине.


HTML

<div class="round-picture">
  &nbsp;
</div>


CSS

body {
    height: 100%;
    padding-top: 45px;
    background-color: #eaeaea;
    font-family: Arial, Helvetica, sans-serif;
}
.round-picture{
    width: 200px;
    height: 200px;
    margin: 0px auto;
    background-image: url(/img/picture.jpg);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}