<MyRusakov.ru />

WordPress 4. Пример создания блога

WordPress 4. Пример создания блога

Видеокурс "WordPress 4. Пример создания блога" научит Вас создавать любые сайты на самой популярной CMS - WordPress.

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

После создания блога он размещается в Интернете, опять же на Ваших глазах. Таким образом, приобретя данный курс, Вы, не обладая никакими знаниями по созданию сайтов, уже сможете их делать, а также выкладывать в Интернет.

Курс очень простой и проходится за один вечер, а знания останутся с Вами навсегда.

Подробнее

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

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

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

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

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

Ответить

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