Как сделать фон картинкой
Очень часто страницы сайта делают с фоном в виде картинки. И я регулярно получаю вопросы о том, как это сделать. Поскольку ответить одним словом здесь не получится (новички не поймут, а опытные и так это знают), я и решил рассказать в этой статье, как сделать фон картинкой.
Существует 3 основных варианта фона: градиент по горизонтали, градиент по вертикали и обычное изображение.
Начнём с фона в виде градиента по горизонтали. Первым делом, Вам необходимо вырезать изображение шириной в 1 пиксель и высотой с самого начала до того места, где уже нет изменения цвета. В итоге, получится, длинная вертикальная полоска толщиной в 1 пиксель. Пусть её высота будет 800 пикселей. Чтобы сделать такой градиентный фон, необходимо в CSS написать следующее:
body {
background: url("images/bg.jpg") repeat-x #dedede;
}
Таким образом, эта полоска размножится по всей ширине экрана и получится градиентный фон. Возможно, Вы сейчас спросите: "А что будет, если высота будет больше 800 пикселей?". Вот для этого мы и задали "#dedede" - тот цвет, где уже нет указанного фонового изображения. Безусловно, у Вас будет другое значение, которое соответствует самому последнему цвету в градиенте. Таким образом, получится, что вначале идёт градиент, а уже потом однотонный цвет, и никаких рывков не происходит.
Абсолютно аналогичный принцип и с градиентом по вертикали, только нужно уже вырезать картинку высотой в 1 пиксель, а также необходимо центрировать сам фон по центру:
body {
background: url("images/bg.jpg") repeat-y center #dedede;
}
Иногда, центрирование не требуется.
И, наконец, как сделать фон в виде обычной картинки. Здесь надо понимать один очень важный момент. Картинка не меняет свои размеры в CSS. Поэтому не получится сделать резиновую вёрстку там, где находится картинка в фоне, другими словами, картинка не будет растягиваться. А задаётся она аналогично:
body {
background: url("images/bg.jpg") no-repeat #dedede;
}Цвет вне изображения надо задавать таким, чтобы был плавный переход от границ картинки к этому цвету.
Я показал Вам, как сделать фон картинкой. Безусловно, есть различные особенные случаи, где нужно уже думать самостоятельно, а самые основные и популярные варианты, Вы теперь уже знаете.
Полный курс по HTML, CSS и по вёрстке сайтов: http://srs.myrusakov.ru/makeup
-
Создано 16.12.2011 13:32:22
-
Михаил Русаков
Комментарии (45):
Михаил, как фоном сделать картинку, которая бы стояла посредине страницы даже при изменении разрешения экрана? Говорят нужен яваскрипт, или возможно с css сделать?
Ответить
Это делается через CSS: background: url("images/bg.jpg") no-repeat top center;
Ответить
Спасибо, Михаил
Ответить
Верно замечено, что опытные это знают, но я бы отметил для случая с картинкой. Во-первых, если не хотим повторения — то можно тег no-repeat опускать. Во-вторых, картинкам нужно задавать размеры. Хорошо, если вы в Фотошопе заранее наметите размеры. А если нет?
Ответить
Здравствуйте, Михаил. Не могли бы вы уточнить, каким образом делается растягиваемый фон? Я что-то слышал про img и z-index, но всё-таки думаю вы лучше знаете.
Ответить
Это может делать в CSS3, но не рекомендую это использовать, поскольку поддерживают CSS3 только современные браузеры. Что касается img и z-index, то здесь так. Вставляется img (width и height по 100%), делается с position: absolute;, и делается у него z-index -1.
Ответить
Скажите, как сделать полосу по горизонтали, как в twitter? Это через CSS или js?
Ответить
Через HTML и CSS, если нет сложной интерактивности, иначе добавляется ещё и JS.
Ответить
спасибо!
Ответить
как сделать картинку рядом с текстом, как например на сайте объявлений маленькая картинка и рядом текст например (картика)авто (картинка)недвижемость в одну строку
Ответить
С помощью таблиц это реализуется.
Ответить
а можно писать так это будет работать? <td><img src="images/bg.jpg"></td>
Ответить
Здесь нет таблиц. Освойте HTML для начала. Вот курс: http://srs.myrusakov.ru/html
Ответить
я уже просмотрел курс по HTML верстка и все такое, просто ошибся хотел написать <td></td>
Ответить
Это одна ячейка. Мысленно разрисуйте таблицу, раскидайте все элементы по своим строкам и столбцам, а дальше напишите это на HTML.
Ответить
спасибо тока что так и сделал благодарю!
Ответить
Михаил помогите, я сделал лого вставил его на index.html перехожу на index2.html он у меня не отображается, почему?
Ответить
Значит, на index2.html он не вставлен или вставлен неправильно.
Ответить
И на index2.html тоже вставил, скопировал с index.html
Ответить
Здравствуйте Михаил, скажите margen может быть отрицательным числом??
Ответить
margin? Да, может.
Ответить
Спасибо, поражаюсь вашим умом!!=) Уж очень вы умный человек!!
Ответить
Подскажите Михаил что здесь не так: body { background: url ("images/osnova.jpg"); background-repeat: repeat-x; } и даж пробувал вот так: body { background: url ("images/osnova.jpg")repeat-x; } и даже так: body { background: url ("../images/osnova.jpg"); background-repeat: repeat-x; } и так: body { background: url ("../images/osnova.jpg"); background-repeat: repeat-x; } А картинка на сайт не добовляетса и не умножаетса по:"x".Почему?В чём дело?И вроде все правильно написал код я все проверел уже раз 10,и все правильно указал путь.И-за какой причина фотка не добовляетса и не умножаетса?Очень надо помогите!
Ответить
Пробел в url() не нужен. А то у Вас как два разных параметра идут.
Ответить
Большое спасибо,а тоя час с етим сидел.Немог понять...Почему у меня нечиво не получаетса?Задавал себе етот вопрос...Даже не думал что в "Пробеле" дело.Я очень,очень вам благодарен!Ещё раз спасибо.Вы мне очень помогли.На форумах разних спрашивал никто не мог понять в чем дело и наконецто вы мне помогли.Спасибо!
Ответить
Здраствуйте!Я сделал как и вы но у меня почему то серый фон?Что такое?
Ответить
А как Вы его задали?
Ответить
Я написал как вы!
Ответить
в файл css написал:body { background: url("images/bg.jpg") repeat left top transparent; } и название картинки.
Ответить
А bg.jpg создали с фоном отличным от серого? Путь правильно прописан? Этот код - это шаблон, он может быть у Вас несколько иным, каким именно нужно уже думать лично Вам.
Ответить
Михаил, помогите пожалуйста. Я скопировал ваш код но фотография сзади не продливается одним цветом. Она либо копируется, либо серый фон.Что нужно сделать? P.S. Вот код: body { background: url("dmc.jpg") no-repeat #dedede; } Путь свой указал.
Ответить
Либо то, либо другое что ли? Если так, то картинка значит большая, а серый фон будет только там, где картинка уже заканчивается.
Ответить
Ну я имею ввиду, что #dedede не работает.(как я понимаю) Картинка кончается чёрным цветом, но не продолжается, а прерывается серым фоном. Это, как исправить?
Ответить
Поставьте #000, раз картинка кончается чёрным цветом.
Ответить
Спасибо)
Ответить
Здраствуйте! Подскажите пожалуйста, что я делаю не так. у меня вместо картинки просто чёрный фон, вот код: body{ background: url("images/fon.jpg") no-repeat #000 ; }
Ответить
Скорее всего путь к картинке указан неверно.
Ответить
Михаил, здравствуйте. А как можно полоску гардиента H=250px и W=1350px прописать в середине экрана. Или какими свойствами css можно ее двигать вверх или вниз, т.е. искать ей место? Спасибо.
Ответить
Задавайте её не в body, а приписывайте её конкретному контейнеру, который и будет уже правильно спозиционирован.
Ответить
Благодарю Вас, Михаил.
Ответить
Что-то я не пойму зачем, repeat-x и #dedede. Чем это отличается от background: url(...) repeat no-repeat;?
Ответить
repeat - это повторение фона на протяжении всего блока. А #dedede - это цвет фона там, где картинка не достала в силу её ограниченных размеров.
Ответить
Михаил, подскажите, пожалуйста, как добиться от картинки, которая находится в самом верху страницы, чтобы она растягивалась на всю длину для любого экрана. Я так понимаю вы её рисовали в фотошопе?
Ответить
векторные изображения растягиваются и сужаются без большой потери в качестве
Ответить
У меня почему-то вообще невозможно сделать картинкой фон. Я перепробовал много разных способов, но почему-то оно не работает. Что это может быть?
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.