Как поменять фон в html css
Перейти к содержимому

Как поменять фон в html css

  • автор:

Изменить задний фон картинки

Author24 — интернет-сервис помощи студентам

Задний фон
Скажите как сделать что бы задник страницы не копировался при прокрутке страницы в низ а был как бы.

Полупрозрачный задний фон
С помощью чего это модно сделать максимально рационально? Можно ли использовать filter ?

Задний фон по расписанию
Приветствую, подскажите или поделитесь ссылками на инфу( на русском языке), как сделать задний фон.

Задний фон странички
Я начинающий web дизайнер)) и прошу помочь вот в чём: 1) как сделать чтоб картинка с небом и.

334 / 181 / 68
Регистрация: 18.03.2010
Сообщений: 586
Записей в блоге: 11

Нужно чтобы формат картинки поддерживал альфа-канал(gif, png). У самой картинки нужно сделать прозрачный фон. И в HTML страничке поместить ее на фоне чего Вам угодно.

div style="background-color: #ff0000;" >img src="ляляля.png" />/div>

Эксперт JSЭксперт HTML/CSS

2435 / 1114 / 312
Регистрация: 23.06.2011
Сообщений: 3,525

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

img src="#" alt="" style="background:URL(путь); width:XXpx; height:XXpx;">

Тегу img можно padding дать, получим картинку в рамочке, и бордюр разумеется можно.
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

задний фон сайта
как сделать что бы задний фон менялся в течении нескольких секунд или минут? покажите пожалуйста.

Задний фон кнопки
Как изменить задний фон кнопки: <input type="submit" value="Удалить" width="40".

Задний фон меню
Тут такое дело, блок меню находится в центральном блоке, его ширина 960px. но фон меню мне нужен.

Задний фон сайта
Я только начал учить HTML and CSS. И столкнулся с тем, что вставляя фото на задний фон, фотография.

Или воспользуйтесь поиском по форуму:

Как изменить цвет фона и текста в HTML? Как сделать фон картинку? Урок – 8

О том, как менять цвет текста я писал тут. Хочу сказать, что это не всегда удобно. Вот, например, вы хотите поменять цвет текста всей HTML страницы. Например, черный цвет текста изменить на красный. Для этого существует атрибут text для тэга . Хочу зацепить тег , так как в этом теге есть атрибуты, которые помогут изменить не только цвет текста, но и фон всей HTML страницы. А теперь подробней и с примером.
Вот атрибуты, которые мы сейчас рассмотрим:

TEXT – этот атрибут задает цвет текста всего документа.
BGCOLOR – этот атрибут указывает цвет фона HTML странице.
BACKGROUND – с этим атрибутом можно залить фон страницы изображением.

Изменяем цвет текста с помощью атрибута text.

Атрибут text прописывается в теге . Цвет задается в виде цифрового кода:

или обычным названием цвета:

Код кодировки и название цвета для HTML вы посмотрите тут.

  Изменяем цвет текста с помощью атрибута text  Текст страницы, таблицы, картинки, музыка и видео.  

Изменяем цвет текста с помощью атрибута text.

  Изменяем цвет текста с помощью атрибута text  Текст страницы, таблицы, картинки, музыка и видео.  

Изменяем цвет текста с помощью атрибута text.

Изменяем цвет фона с помощью атрибута BGCOLOR.

При помощи атрибута BGCOLOR , который тоже размещается в теге , можно задать цвет фона HTML страницы.

Цвет задается в виде цифрового кода:

или обычным названием цвета:

  Изменяем цвет фона с помощью атрибута BGCOLOR  Текст страницы, таблицы, картинки, музыка и видео.  

Изменяем цвет фона с помощью атрибута BGCOLOR

  Заголовок страницы  Текст страницы, таблицы, картинки, музыка и видео.  

Изменяем цвет фона с помощью атрибута BGCOLOR

Изменяем цвет фона с помощью атрибута BACKGROUND.

Атрибут BACKGROUND тоже размещается в теге . С помощью этого атрибута вы сможете сделать картиночный фон. Формат картинки берите jpg или gif . Разрешение картинки можно брать от 12х12 пикселей и больше.

Если фоновая картинка размещена вместе с HTML файлом, это будет выглядеть так:

Если фоновая картинка размещена в папке images, это будет выглядеть так:

  Заголовок страницы  Текст страницы, таблицы, картинки, музыка и видео.  

Изменяем цвет фона с помощью атрибута BACKGROUND.

  Заголовок страницы  Текст страницы, таблицы, картинки, музыка и видео.  

Вот и все.
Теперь вы знаете, как изменить или задать цвет фона. Пробуйте закрепить урок, поменять значение, поэкспериментируйте.
Спасибо, что посетили блог BlogGood.ru. Удачи.

Как сделать фон для сайта?

Любая комната будет выглядеть намного лучше, если ее пол устилает дорогой персидский ковер. Так чем хуже ваш сайт? Может, пришла пора и его пол « застелить » дорогим изящным паласом ручной работы. Разберемся подробнее, как сделать фон для сайта:

Обновлено: 2020-12-03 17:54:09 МГ Максим Галенко автор материала

Фон для сайта

Бывает так, что старый дизайн сайта уже приелся. И хочется чего-нибудь новенького и вкусненького. А новый дизайн будет таковым, если его приготовить своими руками.

Но менять полностью весь дизайн ресурса самостоятельно – вещь неблагодарная. Да и не у всех под это дело как надо « заточены » руки. Поэтому легче всего освежить старый шаблон, изменив цвет фона ресурса или его фоновое изображение.

Существует несколько способов того, как поменять фон на сайте. Для этого используются возможности CSS или html . Но многие из свойств для работы с фоном имеют одинаковое название и методику применения в этих веб-технологиях.

Основы работы с фоном в html

В качестве фона можно использовать несколько элементов:

  • Цвет;
  • Фоновую картинку;
  • Текстурное изображение.

Разберемся с применением каждого из них подробнее.

Для того чтобы установить цвет заднего фона для сайта используется свойство background-color стилевого атрибута style . То есть, чтобы задать основной цвет для веб-страницы, нужно прописать его внутри тега . Например:

 

Фон сайта #55D52B

Основы работы с фоном в html

Кроме шестнадцатеричного кода цвета поддерживается значение в формате ключевого слова или RGB . Примеры:

 

Фон сайта rgb(23,113,44)

Основы работы с фоном в html - 2

 

Фон сайта green

Установка цвета фона с помощью ключевых слов имеет ряд ограничений по сравнению с остальными двумя способами.

В html поддерживается всего 16 ключевых слов для задания цвета. Вот несколько из них: white, red, blue, black, yellow и другие.

Поэтому для того, чтобы установить фон для сайта html , лучше использовать шестнадцатеричный формат или RGB .

Кроме выбора цвета доступны и другие параметры настройки. Если свойству background-color задать значение transparent , то фон страницы станет прозрачным. Это значение данному свойству присвоено по умолчанию.

Теперь рассмотрим возможности языка гипертекста для установки фонового рисунка для сайта. Это возможно сделать с помощью свойства background-image .

Как видно из кода, привязка изображения происходит через путь url , заданный в скобках. Но не все картинки оказываются такими большими, чтобы своими размерами заполнить всю площадь экрана. Посмотрим, как будет отображаться меньший по величине рисунок.

Предположим, что мы разрабатываем сайт о поэзии, и в качестве подложки нужно использовать изображение Пегаса. Крылатый конь будет олицетворять свободу творческой мысли поэта!

Нам нужно, чтобы изображение отображалось посредине экрана один раз. Но, к сожалению, браузер не понимает наших возвышенных желаний. И выводит меньшую по размерам картинку для фона сайта столько раз, сколько может вместить в себя площадь экрана:

Наверное, четырех улыбающихся лошадей с крыльями поэтам будет чересчур много для вдохновения. Поэтому запрещаем клонирование нашего Пегаса. Делаем это с помощью свойства background-repeat . Возможные значения:

  • repeat-x – повторение фонового изображения по горизонтали;
  • repeat-y – по вертикали;
  • repeat – по обеим осям;
  • no-repeat – повторение запрещено.

Среди перечисленных вариантов нас интересует последний. Перед тем, как поменять фон сайта, используем его в своем коде:

Но, конечно, лучше, если бы наш летун расположился посредине экрана. Свойство background-position как раз и предназначено для позиционирования фонового рисунка на странице. Задавать координаты расположения можно несколькими способами:

  • Ключевым словом ( top , bottom , center, left, right) ;
  • Процентами – отсчет начинается от верхнего левого угла;
  • В единицах измерения ( пикселях ).

Воспользуемся самым простым вариантом центрирования:

  • scroll;
  • fixed.

Нам нужно последнее значение. Теперь код нашего примера будет выглядеть вот так:[/HTML]

Текстурный фон сайта

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

Такой объем никак не влияет на скорость загрузки страницы браузером при высокоскоростном соединении с интернетом. Но как быть с мобильным интернетом, при использовании которого загрузка нескольких « метров » займет много времени?

Все эти проблемы решаются с помощью текстурного фона. В нем в качестве рисунка текстуры используется маленькое изображение. Даже при условии его многократного повторения рисунок загружается лишь один раз.

Для создания темного фона для сайта заходим в Photoshop , создаем изображение в виде полоски длинной 1200 пикселей, и шириной 15 пикселей. Затем применяем простой черно-белый градиент и подключаем получившуюся текстуру к странице сайта:

Для наглядности мы добавили текст и задали его цвет с помощью свойства color . Вот что получилось:

Текстурный фон сайта

Средства CSS

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

 Документ без названия body 

Результат будет аналогичным.

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

Задание свойств страницы

Узнайте, как задать свойства страниц HTML и CSS, такие как свойства шрифта, цвета фона и фонового изображения, для страницы Dreamweaver.

Для каждой страницы, создаваемой в Dreamweaver, можно указать свойства макета и форматирования в диалоговом окне «Свойства страницы» («Файл» > «Свойства страницы»). Диалоговое окно «Свойства страницы» позволяет указать используемые по умолчанию семейство и размер шрифта, цвет фона, поля, стили ссылок и многие другие аспекты дизайна страниц. Свойства можно назначать для новых создаваемых страниц, а также изменять их для уже существующих.. Изменения, выполняемые в диалоговом окне «Свойства страницы», будут применены ко всей странице.

Dreamweaver предусматривает два метода изменения свойств страницы: CSS или HTML. Рекомендуется пользоваться CSS для задания фона и изменения свойств страницы.

Примечание.

Выбранные свойства страницы применяются только к активному документу. Если в странице используется внешняя таблица стилей CSS, Dreamweaver не перезаписывает в ней теги, поскольку это влияет на все другие страницы, использующие эту таблицу.

Задание свойств шрифта страницы, цвета фона и фонового изображения CSS

В диалоговом окне «Свойства страницы» можно указать несколько основных параметров макета веб-страниц, в том числе шрифт, цвет фона и фоновое изображение.

Выберите меню «Файл» > «Свойства страницы» или нажмите кнопку «Свойства страницы» в инспекторе свойств текста.

Выберите категорию «Внешний вид (CSS)» и задайте параметры.
Шрифт страницы

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

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

Цвет текста
Указывает цвет шрифтов по умолчанию.
Задает цвет фона для страницы. Щелкните поле «Цвет фона» и выберите цвет из палитры цветов.
Фоновое изображение

Задает фоновое изображение. Нажмите кнопку «Обзор», перейдите к изображению и выберите его. Можно вместо этого вручную ввести путь к фоновому изображению в поле «Фоновое изображение». Если фоновое изображение не заполняет все окно, Dreamweaver отображает его в виде мозаики на все окно (повторяя) точно так же, как браузеры. (Для предотвращения отображения фонового изображения в виде мозаики следует отключить эту функцию в каскадных таблицах стилей .)

  • Вариант «без повтора» позволяет отобразить фоновое изображение только один раз.
  • Вариант «по осям Х и Y» позволяет замостить изображением страницу как в вертикальном, так и в горизонтальном направлении.
  • Вариант «по оси X» позволяет замостить страницу изображением горизонтально.
  • Вариант «по оси Y» позволяет замостить страницу изображением вертикально.

Левое и правое поля

Укажите размер левого и правого полей страницы.

Верхнее и нижнее поля

Укажите размер верхнего и нижнего полей страницы.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *