Здравствуйте уважаемые начинающие веб-мастера. Давайте рассмотрим, как размещается фоновое изображение, с помощью 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>
Результат:
Возможно, Вы обратили внимание на то, что адреса изображений в коде написаны без двух точек вначале, перед images. Если нет, то пожалуйста обратите, а я объясню почему так.
Всё дело в способе подключения css. Если css подключается в файле html при помощи тега style, то две точки вначале адреса не ставятся.
А если css выведена в отдельный файл, и подключена к html документу при помощи тега link, как это показано в статье Подключение стилей, то эти точки ставятся, так как они указывают браузеру на то, что картинка расположена в файле ctyle.css
На следующей странице мы рассмотрим ещё одно, и пока последнее свойство фоновых изображений, так что милости прошу проследовать.
Перемена
На вопрос препода «Почему тебя не было? » 97% студентов ответят «Я болел»,
2%- «я проспал», 1%-промолчит. И ТОЛЬКО Я могла ответить при всех «Милый, ну ты же сам меня не разбудил»
Размноженное изображение < < < В раздел > > > Фиксированное изображение
Вообще-то странно конечно. Обычно просто repeat работает во всех браузерах и от ПО врде не зависит, и задан по умолчанию, его и указывать не обязательно. Но если вспомнить все мои непонятки и рассстройства, то имя им тьма-тьмущая. Вот только некоторые причины из-за которых не получается то что хочется (искать в том порядке в котором я написал): а) мелкая ошибка — где-то не поставил кавычку, точку, двоеточие и т. п.; б) ошибки в написании имени изображения — например если символ С написать по латинской раскладке, а потом остаток слова переключившись а кирилицу написать на ней, то браузер картинку не определит: в) кеш браузера — сохраняет то что было на шаг до того, и потом хоть убей выдаёт эту версию пока не почистишь; г) картинка не умещается в отведённое ей пространство; д) блок спозиционирован так, что оказывается за пределами области просмотра, и часто этому способствуют родительские элементы, т. е. те, в которых этот блок расположен по коду; е) много непоняток зависит от шаблона, так как в нём уже сделаны настройки для всех элементов, и добавлять что-то своё нужно в соответствии с ними, возможно где-то в коде есть background-repeat: no-repeat;
Ошибки в Денвере редкость, зато то что отображает на странице он, и то что отобразится с хостинга будет немного отличаться.
И ещё, не ограничивайтесь только моим сайтом.
да я ,в общем, еще ваш практикум до конца не прошел) сайта то еще и в помине нет… вообще это не беда с повтором — всегда можно и без этого придумать, но, подумал, что стоило спросить. странно ведь… дошел пока до этого пункта только)
Ни с одной из этих проблем не сталкивался. repeat просто узнал что такое, протесировал как работает и больше никогда не применял. Моё мнение — чем меньше украшающих изображений на сайте тем лучше. Тормозят заразы. Картинки только по содержанию поста. Люди идут в инет за инфой, а не любоваться на красоту сайта. Вот полезная инфа — да. Даже чистая страница с полезной инфой посещается лучше, чем красавец с общеизвестными данными. Вот два примера для подражания: htmlbook.ru и zenpr.ru. Второй вообще малышка, а тысячник. Вообще полезнейшие ресурсы.Но это чисто моё мнение.
По Денверу. Первую версию этого сайта я сделал на Денвере, а потом уж дошло, что зря потерял почти год. Я потом этот сайт дважды полностью переделывал, но уже на хостинге. Не стоит бояться или стеснятся. Нужно сразу размещать сайт на хостинге, и учится и делать всё на нём. Деньги не большие. У Бегет где-то 1000-1500 в год. Поддержка по телефону, сразу всё подскажут и поправят. И никаких заморочек, что там срабатывает, а что нет. И домен набирает возраст. И поисковики к молодому сайту относятся снисходительно.
Денвер пригодиться, чтоб протестировать какую нибудь замомрочку, и всё. Да и зихеров с ним хватает. Оно нам надо. Сделали что-то более менее приемлимое (по внешнему виду), и на хостинг.
добрый вечер) слушай а ты никогда не сталкивался с тем, что свойство no repeat не работает, а например repeat-x — работает? честно не пойму в чем загвоздка опять( . да и вообще изображения с денвера то работают то нет. в инете пишут, что проблема в винде но кто знает…