<MyRusakov.ru />

Создание Интернет-магазина на PHP и MySQL

Создание Интернет-магазина на PHP и MySQL

Видеокурс "Создание Интернет-магазина на PHP и MySQL" - это уникальный курс по созданию Интернет-магазина с нуля. Особенностью данного курса является то, что создание идёт с самого начала, то есть от идеи. Далее создаётся дизайн всех необходимых страниц, после делается их вёрстка. Затем создаётся движок на PHP и MySQL, после делается Admin-панель и, наконец, готовый сайт размещается в Интернете.

Адрес созданного в этом курсе сайта: http://storedvd.ru

Всё создание сайта будет происходить на Ваших глазах, поэтому Вы легко сможете повторить весь процесс создания сложного функционального сайта уже при разработке своего портала.

Подробнее

Как сделать фон картинкой

Как сделать фон картинкой

Очень часто страницы сайта делают с фоном в виде картинки. И я регулярно получаю вопросы о том, как это сделать. Поскольку ответить одним словом здесь не получится (новички не поймут, а опытные и так это знают), я и решил рассказать в этой статье, как сделать фон картинкой.

Существует 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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (44):

brussens brussens 19.12.2011 00:57:03

Михаил, как фоном сделать картинку, которая бы стояла посредине страницы даже при изменении разрешения экрана? Говорят нужен яваскрипт, или возможно с css сделать?

Ответить

Admin Admin 19.12.2011 00:59:16

Это делается через CSS: background: url("images/bg.jpg") no-repeat top center;

Ответить

brussens brussens 19.12.2011 01:06:30

Спасибо, Михаил

Ответить

Profi30 Profi30 23.12.2011 20:49:51

Верно замечено, что опытные это знают, но я бы отметил для случая с картинкой. Во-первых, если не хотим повторения — то можно тег no-repeat опускать. Во-вторых, картинкам нужно задавать размеры. Хорошо, если вы в Фотошопе заранее наметите размеры. А если нет?

Ответить

fmeilja fmeilja 05.02.2012 15:21:41

Здравствуйте, Михаил. Не могли бы вы уточнить, каким образом делается растягиваемый фон? Я что-то слышал про img и z-index, но всё-таки думаю вы лучше знаете.

Ответить

Admin Admin 05.02.2012 15:28:58

Это может делать в CSS3, но не рекомендую это использовать, поскольку поддерживают CSS3 только современные браузеры. Что касается img и z-index, то здесь так. Вставляется img (width и height по 100%), делается с position: absolute;, и делается у него z-index -1.

Ответить

Tooloop Tooloop 22.05.2012 20:21:38

Скажите, как сделать полосу по горизонтали, как в twitter? Это через CSS или js?

Ответить

Admin Admin 22.05.2012 21:06:46

Через HTML и CSS, если нет сложной интерактивности, иначе добавляется ещё и JS.

Ответить

Tooloop Tooloop 24.05.2012 19:39:43

спасибо!

Ответить

Tooloop Tooloop 09.06.2012 11:07:40

как сделать картинку рядом с текстом, как например на сайте объявлений маленькая картинка и рядом текст например (картика)авто (картинка)недвижемость в одну строку

Ответить

Admin Admin 09.06.2012 16:40:29

С помощью таблиц это реализуется.

Ответить

Tooloop Tooloop 09.06.2012 19:14:05

а можно писать так это будет работать? <td><img src="images/bg.jpg"></td>

Ответить

Admin Admin 09.06.2012 19:18:07

Здесь нет таблиц. Освойте HTML для начала. Вот курс: http://srs.myrusakov.ru/html

Ответить

Tooloop Tooloop 09.06.2012 19:21:03

я уже просмотрел курс по HTML верстка и все такое, просто ошибся хотел написать <td></td>

Ответить

Admin Admin 09.06.2012 19:28:32

Это одна ячейка. Мысленно разрисуйте таблицу, раскидайте все элементы по своим строкам и столбцам, а дальше напишите это на HTML.

Ответить

Tooloop Tooloop 09.06.2012 20:37:18

спасибо тока что так и сделал благодарю!

Ответить

Tooloop Tooloop 09.06.2012 22:33:34

Михаил помогите, я сделал лого вставил его на index.html перехожу на index2.html он у меня не отображается, почему?

Ответить

Admin Admin 09.06.2012 22:36:34

Значит, на index2.html он не вставлен или вставлен неправильно.

Ответить

Tooloop Tooloop 09.06.2012 22:46:51

И на index2.html тоже вставил, скопировал с index.html

Ответить

qweewq qweewq 09.06.2012 22:45:50

Здравствуйте Михаил, скажите margen может быть отрицательным числом??

Ответить

Admin Admin 09.06.2012 22:47:17

margin? Да, может.

Ответить

Tooloop Tooloop 09.06.2012 22:49:25

Спасибо, поражаюсь вашим умом!!=) Уж очень вы умный человек!!

Ответить

vlados vlados 28.08.2012 17:51:03

Подскажите Михаил что здесь не так: 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,и все правильно указал путь.И-за какой причина фотка не добовляетса и не умножаетса?Очень надо помогите!

Ответить

Admin Admin 28.08.2012 19:56:11

Пробел в url() не нужен. А то у Вас как два разных параметра идут.

Ответить

vlados vlados 29.08.2012 00:34:24

Большое спасибо,а тоя час с етим сидел.Немог понять...Почему у меня нечиво не получаетса?Задавал себе етот вопрос...Даже не думал что в "Пробеле" дело.Я очень,очень вам благодарен!Ещё раз спасибо.Вы мне очень помогли.На форумах разних спрашивал никто не мог понять в чем дело и наконецто вы мне помогли.Спасибо!

Ответить

wormix45 wormix45 04.01.2013 20:26:11

Здраствуйте!Я сделал как и вы но у меня почему то серый фон?Что такое?

Ответить

Admin Admin 04.01.2013 20:58:29

А как Вы его задали?

Ответить

wormix45 wormix45 04.01.2013 21:16:37

Я написал как вы!

Ответить

wormix45 wormix45 04.01.2013 21:17:17

в файл css написал:body { background: url("images/bg.jpg") repeat left top transparent; } и название картинки.

Ответить

Admin Admin 04.01.2013 21:45:25

А bg.jpg создали с фоном отличным от серого? Путь правильно прописан? Этот код - это шаблон, он может быть у Вас несколько иным, каким именно нужно уже думать лично Вам.

Ответить

Pro100Sany Pro100Sany 29.01.2013 19:03:22

Михаил, помогите пожалуйста. Я скопировал ваш код но фотография сзади не продливается одним цветом. Она либо копируется, либо серый фон.Что нужно сделать? P.S. Вот код: body { background: url("dmc.jpg") no-repeat #dedede; } Путь свой указал.

Ответить

Admin Admin 29.01.2013 20:30:14

Либо то, либо другое что ли? Если так, то картинка значит большая, а серый фон будет только там, где картинка уже заканчивается.

Ответить

Pro100Sany Pro100Sany 29.01.2013 23:38:08

Ну я имею ввиду, что #dedede не работает.(как я понимаю) Картинка кончается чёрным цветом, но не продолжается, а прерывается серым фоном. Это, как исправить?

Ответить

Admin Admin 30.01.2013 10:39:09

Поставьте #000, раз картинка кончается чёрным цветом.

Ответить

Pro100Sany Pro100Sany 30.01.2013 16:18:57

Спасибо)

Ответить

kukun kukun 30.04.2013 22:50:58

Здраствуйте! Подскажите пожалуйста, что я делаю не так. у меня вместо картинки просто чёрный фон, вот код: body{ background: url("images/fon.jpg") no-repeat #000 ; }

Ответить

Admin Admin 01.05.2013 10:48:56

Скорее всего путь к картинке указан неверно.

Ответить

npa npa 02.09.2013 13:39:24

Михаил, здравствуйте. А как можно полоску гардиента H=250px и W=1350px прописать в середине экрана. Или какими свойствами css можно ее двигать вверх или вниз, т.е. искать ей место? Спасибо.

Ответить

Admin Admin 02.09.2013 22:18:19

Задавайте её не в body, а приписывайте её конкретному контейнеру, который и будет уже правильно спозиционирован.

Ответить

npa npa 03.09.2013 01:14:41

Благодарю Вас, Михаил.

Ответить

tilipaka tilipaka 01.11.2013 02:47:52

Что-то я не пойму зачем, repeat-x и #dedede. Чем это отличается от background: url(...) repeat no-repeat;?

Ответить

Admin Admin 01.11.2013 10:56:19

repeat - это повторение фона на протяжении всего блока. А #dedede - это цвет фона там, где картинка не достала в силу её ограниченных размеров.

Ответить

Kozlova Kozlova 01.12.2013 13:00:22

Михаил, подскажите, пожалуйста, как добиться от картинки, которая находится в самом верху страницы, чтобы она растягивалась на всю длину для любого экрана. Я так понимаю вы её рисовали в фотошопе?

Ответить

alexandrdante alexandrdante 01.12.2013 15:31:43

векторные изображения растягиваются и сужаются без большой потери в качестве

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.