7

Как растянуть картинку на весь экран, если я прописываю вот этот HTML код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Trancitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Словарь терминов</title>
    </head>
    **<body background="img/image.jpg"  align="center" width="250" height="150">**
        <center><h1>Словарь терминов</h1></center>

У меня экран 1280x800.

3 ответа 3

8

CSS3:

body {
        background: url(img/image.jpg) no-repeat center center fixed;
        background-size: cover;
}

Ещё варианты.

2
  • Если в пути к картинке содержатся пробелы — url(img/test image.jpg) — следует поступить, как предписывает данный комментарий. Спасибо. 2 мар 2016 в 7:27
  • Спасибо большое! Очень помогло 22 мая 2020 в 10:43
-1
<body background="img/image.jpg" width="100%" height="100%">
1
  • 2
    не сработает если реальная ширина картинки будет меньше ширины окна браузера.
    – FLK
    2 апр 2012 в 15:09
-1

Важно не забывать кавычки ставить: background: url("img/image.jpg"), иначе на экранах с некоторым разрешением внизу может появляться "полоса"— опускается самая верхняя часть фоновой картинки.

8
  • Вы уверены? можно и без кавычек писать, это роли не играет, а чтобы фон не повторялся просто добавить нужно no-repeat
    – soledar10
    19 фев 2016 в 11:27
  • @soledar10, да, ибо таким образом лично разрешил проблему на своём сайте. Раньше нижняя часть его страниц выглядела на моём мониторе так: !1 !2 Если надо, могу html-страницы скинуть, проверьте на Screenfly с кавычками и без. Спасибо. 19 фев 2016 в 13:45
  • jsfiddle.net/soledar10/vLvrzh2x без разницы есть кавычки или нет
    – soledar10
    20 фев 2016 в 8:10
  • @soledar10, если изображение по ссылке, тоже не вижу изменений. Но если лежит в папке, похоже, кавычки приобретают значение: Отображение с кавычками / Отображение без кавычек / Код с кавычками / Код без кавычек / Спасибо. 20 фев 2016 в 12:51
  • 2
    Дело в том, что пробел не должен содержаться в адресе. Если он там есть, то помогает одно из следующих решений: 1. Честно заменить пробел на %20. 2. Написать адрес в кавычках. 3. Экранировать пробел \ . В приведённых примерах фон с пробелом без кавычек вычёркивает всё css-свойство включая no-repeat center center fixed, однако, за счёт того, что у body есть устаревший атрибут background с той же картинкой, он всё же отображается. На самом деле, в нормальной ситуации фона в таком случае вообще не окажется.
    – Qwertiy
    1 мар 2016 в 16:14

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.