Позиционируем фоновое изображение

Здравствуйте уважаемые начинающие веб-мастера. Давайте рассмотрим, как размещается фоновое изображение, с помощью CSS.

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

Для размещения фоновых изображений на странице, в CSS применяется свойство background-position.

В значении его указываются расстояния от границ блока, в котором размещается элемент, до самого элемента.

Первая цифра — отступ от левой границы

Вторая цифра — отступ от верхней границы

Для более точного определения местоположения элемента, применяется свойство outline (временная рамка), и я рекомендую использовать линейку «mySize». Как её установить можно посмотреть здесь

Пример кода:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Документ без названия</title>
<style>
body{
  background: #fdeaa8;
  background-image: url(images/i6.jpg);
  background-position: 200px 100px;
  background-repeat: no-repeat;
  outline: 2px solid #ffff00;
}
</style>
</head>
<body>

</body>
</html>

Результат:

Результат применения свойства css - background-position:

Возможно, Вы обратили внимание на то, что адреса изображений в коде написаны без двух точек вначале, перед images. Если нет, то пожалуйста обратите, а я объясню почему так.

Всё дело в способе подключения css. Если css подключается в файле html при помощи тега style, то две точки вначале адреса не ставятся.

А если css выведена в отдельный файл, и подключена к html документу при помощи тега link, как это показано в статье Подключение стилей, то эти точки ставятся, так как они указывают браузеру на то, что картинка расположена в файле ctyle.css

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

Неужели не осталось вопросов? Спросить

Короткий отдых
Перемена

На вопрос препода «Почему тебя не было? » 97% студентов ответят «Я болел»,
2%- «я проспал», 1%-промолчит. И ТОЛЬКО Я могла ответить при всех «Милый, ну ты же сам меня не разбудил»

Размноженное изображение < < < В раздел > > > Фиксированное изображение
 

А ну-ка, что там ещё интересного
Как делается фоновый цвет;
Фоновые изображения;
Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.

4 комментария на «Позиционируем фоновое изображение»

  1. stariс говорит:

    Вообще-то странно конечно. Обычно просто repeat работает во всех браузерах и от ПО врде не зависит, и задан по умолчанию, его и указывать не обязательно. Но если вспомнить все мои непонятки и рассстройства, то имя им тьма-тьмущая. Вот только некоторые причины из-за которых не получается то что хочется (искать в том порядке в котором я написал): а) мелкая ошибка — где-то не поставил кавычку, точку, двоеточие и т. п.; б) ошибки в написании имени изображения — например если символ С написать по латинской раскладке, а потом остаток слова переключившись а кирилицу написать на ней, то браузер картинку не определит: в) кеш браузера — сохраняет то что было на шаг до того, и потом хоть убей выдаёт эту версию пока не почистишь; г) картинка не умещается в отведённое ей пространство; д) блок спозиционирован так, что оказывается за пределами области просмотра, и часто этому способствуют родительские элементы, т. е. те, в которых этот блок расположен по коду; е) много непоняток зависит от шаблона, так как в нём уже сделаны настройки для всех элементов, и добавлять что-то своё нужно в соответствии с ними, возможно где-то в коде есть background-repeat: no-repeat;

    Ошибки в Денвере редкость, зато то что отображает на странице он, и то что отобразится с хостинга будет немного отличаться.

    И ещё, не ограничивайтесь только моим сайтом.

  2. Сергей говорит:

    да я ,в общем, еще ваш практикум до конца не прошел) сайта то еще и в помине нет… вообще это не беда с повтором — всегда можно и без этого придумать, но, подумал, что стоило спросить. странно ведь… дошел пока до этого пункта только)

  3. stariс говорит:

    Ни с одной из этих проблем не сталкивался. repeat просто узнал что такое, протесировал как работает и больше никогда не применял. Моё мнение — чем меньше украшающих изображений на сайте тем лучше. Тормозят заразы. Картинки только по содержанию поста. Люди идут в инет за инфой, а не любоваться на красоту сайта. Вот полезная инфа — да. Даже чистая страница с полезной инфой посещается лучше, чем красавец с общеизвестными данными. Вот два примера для подражания: htmlbook.ru и zenpr.ru. Второй вообще малышка, а тысячник. Вообще полезнейшие ресурсы.Но это чисто моё мнение.

    По Денверу. Первую версию этого сайта я сделал на Денвере, а потом уж дошло, что зря потерял почти год. Я потом этот сайт дважды полностью переделывал, но уже на хостинге. Не стоит бояться или стеснятся. Нужно сразу размещать сайт на хостинге, и учится и делать всё на нём. Деньги не большие. У Бегет где-то 1000-1500 в год. Поддержка по телефону, сразу всё подскажут и поправят. И никаких заморочек, что там срабатывает, а что нет. И домен набирает возраст. И поисковики к молодому сайту относятся снисходительно.

    Денвер пригодиться, чтоб протестировать какую нибудь замомрочку, и всё. Да и зихеров с ним хватает. Оно нам надо. Сделали что-то более менее приемлимое (по внешнему виду), и на хостинг.

  4. Сергей говорит:

    добрый вечер) слушай а ты никогда не сталкивался с тем, что свойство no repeat не работает, а например repeat-x — работает? честно не пойму в чем загвоздка опять( . да и вообще изображения с денвера то работают то нет. в инете пишут, что проблема в винде но кто знает…

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *