Css как сделать фоном картинку: Как сделать фоновый рисунок в css

Содержание

Сделать, чтобы фон не повторялся

Меню

Наши новости

Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить — становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет

Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки

Видео уроки

Разместить статью у нас на сайте.

Сделать, чтобы фон не повторялся — «Фоновая картинка»

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
4.0+	1.0+	4.0+	1.0+	1.0+	1.0+	1.0+

Задача

Добавить фоновую картинку так, чтобы она не повторялась по горизонтали и вертикали.

Решение

Используйте свойство background со значением no-repeat для селектора body.

Описание

По умолчанию фоновая картинка повторяется по горизонтали и вертикали, выстраиваясь мозаикой на всём поле веб-страницы. Однако такое поведение фона не всегда требуется, поэтому на помощь придёт значение no-repeat, добавляемое к стилевому свойству background.

Общий синтаксис в этом случае будет следующий.

<style>
  body { background: url(путь к графическому файлу) no-repeat; }
</style>

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

Пример 1. Фон веб-страницы

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>  
  <meta charset="utf-8">
  <title>Фон</title>
  <style>
   body {
    background: url(images/bg2.png) no-repeat; /* Параметры фона */
   }
  </style>
 </head>
 <body>
  <p>Содержимое веб-страницы</p>
 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Фоновая картинка на веб-странице без повторения

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Еще новости по теме:

Другие новости по теме:

Комментарии для сайта Cackle

Справка: Как сделать фоновое изображение кликабельным — HTML и CSS — Форумы SitePoint

horatiub 8 января 2011 г., 18:15 1

Я устанавливаю фоновое изображение на сайте с помощью этого кода CSS:

body { background:#2f2f2e url(img/photo.jpg) top center no-repeat; верхнее поле: 200 пикселей; цвет:#333; шрифт: 12px Arial, Helvetica, без засечек;}

Два вопроса:

Как мне превратить это фоновое изображение в href, кликабельное изображение?
Изображение настроено на 1280 пикселей и отлично выглядит на широкоформатных мониторах, но на нешироких оно не показывает все изображение. Предложения?

Спасибо.

система 8 января 2011 г., 19:11 2

Два ответа:

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

xhtmlкодер 8 января 2011 г., 20:21 3

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

Stomme_poes

8 января 2011 г., 21:53 4

Как мне превратить это фоновое изображение в href, кликабельное изображение?

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

Изображение настроено на 1280 пикселей и отлично выглядит на широкоформатных мониторах, но на нешироких оно не показывает все изображение. Предложения?

Если это был HTML-тег , у вас есть возможность (ограниченная) масштабировать его. Однако фоновые изображения не масштабируются.

То, что я видел, люди делают с масштабируемыми фоновыми изображениями (и это нехорошо, но можно сделать), у них есть изображение в качестве первого дочернего элемента (хотя оно должно быть внутри блочного элемента, не может сидеть отдельно непосредственно внутри тега body), ширина и высота которого установлены на 100%. Он должен быть абсолютно позиционирован, чтобы он мог это сделать, телу потребуется высота 100%, а затем дочернему элементу после изображения, тому, у которого есть контент, потребуется минимальная высота 100%, и он должен быть « positioned» (подойдет position: relative), чтобы изображение abso-po’d не закрывало его.

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

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

Вы ничего не можете с этим поделать.

Ну, вы можете пойти другим путем: сделать изображение фоновым изображением для первого дочернего элемента body (div или что-то в этом роде), а затем установить ширину этого div равной ширине изображения. Пользователи получат полосу прокрутки на небольших мониторах, что означает, что они могут прокручивать вправо, чтобы увидеть остальную часть изображения.

Если вы делаете это кликабельным, я не уверен, какова ваша точка/цель.

система 8 января 2011 г., 22:27 5

Я нашел это на другом сайте. Он устанавливает ширину изображения «фона» на 100%, что поддерживает соотношение сторон изображения bg, и поэтому ваш bg не искажается при изменении размера окна браузера. Единственное, что я добавил, это обернуть img тегом

, чтобы сделать его кликабельным.

  0 Transitional//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xht...ansitional.dtd">

    <голова>
        <название>
        <тип стиля="текст/CSS">
            тело {
                маржа: 0;
                заполнение: 0;
                цвет фона: зеленый;
            }
            #обертка {
                должность: родственница;
            }
            #обертка #bgContainer {
                положение: абсолютное;
                ширина: 100%;
                верх:0; слева:0;
            }
            #обертка #bgContainer img {
                ширина: 100%;
                граница: нет
            }
            #содержание {
                переполнение: скрыто;
                должность: родственница;
                ширина: 800 пикселей;
                поле:0 авто;
            }
         
    
    <тело>
        <дел>
            <дел>
                <а href="#">

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fusce facilisis magna sed urna ultrices aliquet. Sed tempor, ante et semper molestie, metus metus ultricies arcu, ornare iaculis tellus justo at dui. Ут tempor commodo elit, fringilla malesuada sapien suscipit et. Vestibulum bibendum dapibus porttitor. Проин condimentum volutpat ultrices. Ут в aliquam ipsum. Donec tempor placerat feugiat. Маурис в elementum mi. Sed lobortis congue est, sed rhoncus justo imperdiet et. Nunc malesuada aliquam lobortis. Морби сит амет сапиен ac urna hendrerit varius. Сед луктус курсус эним. Nulla vestibulum lacus quis lectus aliquet scelerisque. Сед vulputate accumsan massa convallis vehicula. Suspendisse eget imperdiet arcu. Pellentesque nisi elit, mollis в aliquam eget, accumsan id диам.