ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

FD Chat - Чат на вашем форуме

Чат на отдельной странице на форуме. Без регистрации, используются форумные аккаунты.
Стоимость: 1500р
Первым 10 покупателям скидка 20%.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.



УРОК: Фон форума/сайта CSS

Сообщений 1 страница 10 из 16

1

Как настроить фон форума?

Как вставить фон на форум/сайт?
Вставляем в свой стиль следующее:

body {
background-image: url(http://ссылка на фоновую картинку);
}

Как сделать фон форума фиксированным (без прокрутки)?
Добавляем к тому же коду "background-attachment: fixed;"

body {
background-image: url(http://ссылка на фоновую картинку); background-attachment: fixed;
}


Как сделать фон справа/слева? Как сделать его не повторяющимся?
Добавляем к тому же коду "no-repeat right/left;"

body {
background: url(http://ссылка на фоновую картинку) no-repeat right; background-attachment: fixed;
}

right - справа
left - слева


Какие еще настройки есть применимы к фону?

  • background-attachment: fixed - не прокручивающееся фоновое изображение

  • no-repeat - фоновое изображение прокручивается используя только один элемент (картинку) без повторов

  • repeat - фоновое изображение повторяется по горизонтали и вертикали.

  • repeat-x - фоновое изображение повторяется только по горизонтали

  • repeat-y - фоновое изображение повторяется только по вертикали

  • background-position: top center - фоновое изображение располагается по центру (вверху)

  • background-position: top left - верху слева

  • background-position: right top - верху справа

  • background-position: left слева по центр

  • background-position: right с права по центру

  • background-position: bottom left - внизу слева

  • background-position: bottom - внизу

  • background-position: bottom right - внизу справа


#p58693,sadhaka написал(а):

Итак, воспользуемся свойством background

Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству.

background: [background-attachment || background-color || background-image  || background-position || background-repeat]

Теперь расшифровываем:

  • background-attachment - определяет будет фоновое изображение прокручиваться или фиксировано. Значение:

    • fixed - фиксированное фоновое изображение;

    • scroll - прокручивающее фоновое изображение;

  • background-color - цвет фона. Значения:

    • цвет*

    • transparent

  • background-image - фоновое изображение. Значения:

    • url(путь к файлу)

    • none

  • background-position - позиция фонового изображения. Значения: выставляется 2 значения - сначала по горизонтали, потом по вертикали. Если выставлено одно значение, значит второе принимается по умолчанию (для вертикального выравнивания это top, для горизонтального - left)

    • Значения для выравнивания по горизонтали:

      • left

      • center

      • right

    • Значения для выравнивания по вертикали:

      • top

      • center

      • bottom

  • background-repeat - определяет будет ли фоновое изображение повторяться. Значения:

    • no-repeat - не повторяется;

    • repeat - повторяется всегда;

    • repeat-x - повторяется по горизонтали;

    • repeat-y - повторяется по вертикали;

Теперь собираем из этого конструктора нужное нам правило. Например:

background: fixed #BAF479 url(путь к картинке)  right bottom no-repeat;


* Шестнадцатеричный код цвет, например #ffffff - белый, #000000 - черный и т.п.

Подпись автора

ForumD.ru очень нужны подписчики и социальных сетях и на YouTube!

https://forumstatic.ru/files/0007/e3/f7/42799.png   https://forumstatic.ru/files/0007/e3/f7/10336.png   https://forumstatic.ru/files/0007/e3/f7/85578.png

С увеличением количество подписчиков, нам откроются новые возможности и функционал.
Если хочешь поддержать наш проект - просто подпишись! :)

+3

2

А как сделать чтобы он был с двух сторон вот так
!!!!!       !!!!!
!!!!!       !!!!!

0

3

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

0

4

Моля
Создание фона для форума. Урок 1 - Статический фон.

Подпись автора

)

0

5

У меня не получается.
Мне нужно что бы картинка была зафиксирована, не повторялась и стояла в нижнем правом углу, а фон форума был #BAF479.

0

6

Итак, воспользуемся свойством background

Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству.

background: [background-attachment || background-color || background-image  || background-position || background-repeat]

Теперь расшифровываем:

  • background-attachment - определяет будет фоновое изображение прокручиваться или фиксировано. Значение:

    • fixed - фиксированное фоновое изображение;

    • scroll - прокручивающее фоновое изображение;

  • background-color - цвет фона. Значения:

    • цвет*

    • transparent

  • background-image - фоновое изображение. Значения:

    • url(путь к файлу)

    • none

  • background-position - позиция фонового изображения. Значения: выставляется 2 значения - сначала по горизонтали, потом по вертикали. Если выставлено одно значение, значит второе принимается по умолчанию (для вертикального выравнивания это top, для горизонтального - left)

    • Значения для выравнивания по горизонтали:

      • left

      • center

      • right

    • Значения для выравнивания по вертикали:

      • top

      • center

      • bottom

  • background-repeat - определяет будет ли фоновое изображение повторяться. Значения:

    • no-repeat - не повторяется;

    • repeat - повторяется всегда;

    • repeat-x - повторяется по горизонтали;

    • repeat-y - повторяется по вертикали;

Теперь собираем из этого конструктора нужное нам правило. Например:

background: fixed #BAF479 url(путь к картинке)  right bottom no-repeat;


* Шестнадцатеричный код цвет, например #ffffff - белый, #000000 - черный и т.п.

0

7

sadhaka написал(а):

sadhaka

Спасибо, а то никак не могла соединить картинку с кодом цвета фона.

0

8

Хороший урок!

0

9

Герда
Спасибо

0

10

подскажи пожалуйста, что я не так сделала, что получилось вот так
http://SSMaker.Ru/6373ac1e/
http://SSMaker.Ru/919938db/

http://khr2.rolka.su/

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."