Подписка
Email
Fb
RSS
Twitter
Email

Видео уроки CSS. Часть 5

Продолжаем уроки CSS на DenWeb.Ru. В прошлых двух уроках мы работали с текстом и шрифтами. Сегодня приступаем к форматированию внешнего вида html документа.

Тема конкретно данного урока — как изменять фон на странице средствами css.

В качестве фона можно задать цвет или изображение. Свойства фона не наследуются. Фон можно задавать любому html элементу на странице.

План:

  • Как задать в качестве фона цвет: свойство background-color: #D5D5D5;
  • Как задать в качестве фона изображение: свойство
    background-image: url(image.jpg);(как правильно указать путь)
  • Как сделать фон прозрачным: свойство background-color: transparent;
  • Дублирование фонового изображения: свойство
    background-repeat: repeat/repeat-x/repeat-y/no-repeat;
  • Фиксирование фонового изображения: свойство
    background-attachment: scroll/fixed;
  • Позиционирование фонового изображения: свойство
    background-position: top left;

Вы можете оставить комментарий.

37 комментариев к записи “Видео уроки CSS. Часть 5”

  1. Серёга:

    Подскажите как сделать так чтобы текст не разрывал 2 элемента картинки допустим верх и серидину а ложился на них.Я что то вот тут нахимичил <div class="midletop"><br /> верх картинки<div class="midlemid"></div> и серидинаа текст не понял как на них положить((

  2. Smeshnaya:

    Что-то у меня не получается с фоном.  Все прописываю как показано, но фон не появляется... Посмотрите, пожалуйста, может ошибку где допустила?body { background-image: url(img1.jpg);}

    • Все прописано верно. Возможно файл изображения лежит не в той же папки, что и файл со стилями, либо расширение файла не jpg.

      • Smeshnaya:

        Действительно... Я чтоб не путаться в картинках создала папку Image и засунула картинку туда.Прописывала путь уже вот так   body {  background-image: url(image\img1.jpg); }Вот тут уже видимо неправильно, потому что фон не появляется.А вернула картинку в одну папку с файлом, получилось.

        • Smeshnaya:

          Ой, все, извиняюсь! Нашла свою ошибку, оказывается неправильно написала слово в названии папки. Вот ворона!)

  3. Smeshnaya:

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

  4. Костя:

    а как растянуть изображение на всю страницу на фоне?

  5. Fati:

    присоединяюсь к вопросу Кости. Очень актуально. Ден , не оставьте без ответа.

  6. Костя, 

    Fati, обычно изображения не растягивают а делают повторения по горизонтали или/и вертикали, если это возможно (repeat). 

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

  7. Fati:

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

  8. Саня:

    Вопрос как открыть окошко где прописаны все свойства.И второе что это за линейка дополнительная программа или я что то не понимаю??

    • Программа называется PicPic, если я правильно понял по поводу окна со свойствами, то — сочетание ctrl+пробел.

  9. Александр:

    Добрый день! Подскажите, нужно  поставить фоном картинку хорошего качества, ее размер 2560*1600(jpg). Вставляю ее в Css файл, после обновления страницы видна только верхняя правая часть всей картинки.Что нужно сделать чтобы она была видна вся и не потерять в качестве при ее установке? Заранее спасибо! 

    • Картинка должна отображаться вся. Какому элементу страницы задаете этой картинкой фон?

      • Александр:

        Фон хочу задать  для всей страницы. В css файле прописываю: background: url(.../images/best5.jpg)  no-repeat top center;Если в конце прописываю center center то картинка «уезжает» наверх и видна только половина рисунка.

        • Какому элементу задаете фон? BODY?

          Не видя всей страницы сложно сказать в чем ошибка. Может быть какие-то другие элементы и стили на это влияют.

  10. Дмитрий:

    Добрый день.Вопрос вообщем то такой:Хочу сделать в правой части экрана отдельный блок, так сказать sideBar, в котором будут расположены фотографии. Чтобы расположить их, мне придется разделять каждую картинку div'ами ? Или же можно как-то подругому?Если несовсем понятно, что я имею ввиду, могу приложить картинку.

  11. Лю:

    Den, скажите пожалуйста, если для страницы планируется довольно сложный фон, с орнаментами и коллажами, к примеру, стоит ли делать его именно как свойство backdround в css или же поставить отдельным дивом с картинкой? Что лучше с профессиональной точки зрения? Заранее спасибо.

    • Так как это будет фоном, то лучше все таки background. С картинками будет все сложнее, надо будет потом делать позиционирование и разный порядок слоев.

  12. Саня:

    Как можно с вами связаться, почта или icq?? Просто есть вопросы.

  13. Никита:

    ден ты в описании ошибся. фон на странице а ты написал фон на сранице!

  14. Никита:

    Ден а если в пикселях фото на фон добавлять то надо указывать высоту?например так:{background-position^top 253px}.

  15. Никита:

    Ден я добавил фото на фон. подключил значение ------no repeat-------- .я хочу разместить фото на станице с помощью пикселей.надо ли добавлять высоту(top,center,bottom)?например: 

     

    {background-position:top 253px;}

  16. Apart:

    не получается с помощью backgrount-position переместить блок <div>,мб я не правильно что-то делаю? div  {  background-position: bottom left; }

  17. Ильдар:

    Привет Денн, спасибо за уроки очень помогают. Я хотел спросить как сделать так что бы картинка сливалась с фоном.Заранее спасибо

  18. Дима:

    Спасибо больше, очень доходчиво все объясняете!

  19. Екатерина:

    Здравствуйте, с основным фоном на  странице почти все задуманное получилось, (кроме того что фон весь не помещается (правый нижний угол не влезает)), но у меня и другая мысль, я хочу поверх этого фона наложить другой в виде цвета, но не на всю страницу, а на часть. такое возможно? А то если для отдельных тэгов задавать background-color, получаются разрывы, не хочу разрывы.

  20. Здравствуйте!Имеется на сайте калькулятор. При его открытии в новом окне, он берет фон из файла style.css (картинку), а мне нужно простая обычная заливка. При прописывании кода на странице элемента, ничего не помогает. Форма становится в заданный мною цвет, а фон все равно остается картинкой.

  21. Дмитрий:

    Денис, спасибо за уроки. Столкнулся с такой проблемой и никак не могу понять ее причину. При попытки разместить фоновый рисунок по координатам пикселей, рисунок появляется совсем в другом место от заданных. В чем это может быть связано? Пробовал это проделать с разными картинками, с разными расширениями результат один для всех. Вместо заданных для исходной верхней левой точки 750рх 450рх, исходная точка картинки появлялась в пределах 1200 600. С чем это может быть связано?

Оставить комментарий

Spam Protection by WP-SpamFree

Яндекс.Метрика