Почему картинка не отображается в фоне?

@inquisitor · Регистрация: 22.12.2015

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8" />
    <title>Простой слайдер</title>
    <link type="text/css" rel="stylesheet" href="css/style.css" />
    
</head>
<style>
 
</style>
<body>
<div class="one">
  <body>
 
    <img id="img1"/>
    <div class="flex"> 
        <p>Endangered native of the Maluti
         Mountains…</p>
    </div>
    
</body>
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.flex {
  display: flex;
}
p{
    font-size: 30px;
    color:red;
    font-weight:bold;
    }
#img1{
width:100%; height:auto; border:1px solid;
background-image: url(../images/car.jpg);
background-repeat: no-repeat;
    }

@love_ourselves · 21.10.2017, 03:35

Не совсем корректный код. Если вы хотите просто вставить изображение - то <img id="img1"/> замените на <img id="img1" src="/images/car.jpg"/>

Если хотите сделать фон у текста, то:

HTML5
1
2
3
4
5
6
<div id="img1">
    <div class="flex"> 
        <p>Endangered native of the Maluti
         Mountains…</p>
    </div>
</div>

@inquisitor · 21.10.2017, 04:37 **[ТС]**

IE отображает фон,а остальные браузеры отказываются. По нажатию F12 никаких ошибок.Текст размещается под изображением или над ним если переставить в html.А как сделать,что бы текст был на фоновом изображении и не сьежал при маштабировании?Картинка уменашаеться пропорционально то,что нужно.Вот так бы с текстом.

@Freeze_Breeze · 21.10.2017, 12:54

scherbakovss201, Вам такое нужно?

HTML5
1
2
3
4
5
<section class="img_background">
  <div class="text">
     <p>Endangered native of the Maluti Mountains…</p>
  </div>
</section>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.img_background {
    background-image: url(../images/car.jpg);
    width: 1600px;
    height: 1200px;
    margin: 0 auto;
}
 
.text p {
    font-family: Arial, serif;
    font-size: 50px;
    text-align: center;
    color: #ff5142;
    margin: 0;
    padding: 0;
}

@inquisitor · 23.10.2017, 21:35 **[ТС]**

Сообщение от Freeze_Breeze

CSS
1
2
width: 1600px;
height: 1200px;

Почему то так работает,а вот width:100%;не работает.Мне не хотелось бы до фиксированной ширины привязываться.

@Freeze_Breeze · 23.10.2017, 21:51

Вот так.

CSS
1
2
3
4
5
6
7
.img_background {
    background-image: url(../images/car.jpg);
    max-width: 1920px:
    width: 100%;
    height: 1200px;
    margin: 0 auto;
}

@inquisitor · 23.10.2017, 22:28 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
  
 
    <link type="text/css" rel="stylesheet" href="abc.css" />
 
 
</head>
 
<body>
 
<section class="img_background">
  <div class="text">
     <p>Endangered native of the Maluti Mountains…</p>
  </div>
</section>
 
 
   
 
</body>
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.img_background {
    background-image: url(../images/car.jpg);
    width: 1600px;
    height: 1200px;
    margin: 0 auto;
}
 
.text p {
    font-family: Arial, serif;
    font-size: 50px;
    text-align: center;
    color: #f00;
    margin: 0;
    padding: 0;
 
ничего не отображаеться
}

Добавлено через 5 минут
Ошибка в пути к изображению.В одной папке css,html,папка images
background-image: url(images/car.jpg);

Добавлено через 4 минуты

Сообщение от Freeze_Breeze

Вот так.

CSS
1
2
3
4
 max-width: 1920px:
    width: 100%;
    height: 1200px;
    margin: 0 auto;

Получается так,что мне нужно сделать изображение адаптивным,что бы оно само выбирало ширину и высоту.Например
при ширине от 601 до 800,я не знаю,какая высота будет.А без параметра высота,просто width: 100%; не отображает изображение.

Добавлено через 16 минут
обрезает изображение по ширине Это не подходит

CSS
1
2
3
4
5
6
7
8
9
10
11
 @media screen and (min-width: 1366px) and (max-width: 1919px) { 
#img_background {
    background-image: url(images/01.png);
    background-repeat:no-repeat;
     
    width: 100%;
    height: 908px;
    margin: 0 auto; 
 
}
}

@Freeze_Breeze · 23.10.2017, 23:22

Сообщение от scherbakovss201

Ошибка в пути к изображению.В одной папке css,html,папка images
background-image: url(images/car.jpg);

Во первых, если Вы задаете картинку через CSS стили, тогда нужно указывать абсолютный адрес background-image: url(../images/car.jpg); Второе если Вам нужно адаптивное изображение, тогда используйте следующий код:

HTML5
1
<img src="mountains.jpg" alt="mountains">

CSS
1
2
3
4
img[alt="mountains"] {
   width: 100%; 
   height: auto;
}

В третьих медиа-запросы начинаются с 1200px.
Удалите этот медиа-запрос, это бред, то, что Вы написали.

CSS
1
 @media screen and (min-width: 1366px) and (max-width: 1919px)

Добавлено через 8 минут
Если тебе нужно, что бы фоновая картинка была адаптивной, тогда такой код:

HTML5
1
2
3
<section class="img">
        
</section>

CSS
1
2
3
4
5
6
7
8
.img {
    background-image: url(mountains.jpg);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top center;
    height: 987px;
}

@inquisitor · 23.10.2017, 23:40 **[ТС]**

правильно так

CSS
1
2
3
4
5
6
7
8
 @media screen and (min-width: 1366px) and (max-width: 1919px) { 
#img_background {
    background-image: url(images/01.png);
    background-repeat:no-repeat;  
    width: 100%;
    background-size: 100% auto;
}
}

@Freeze_Breeze · 23.10.2017, 23:46

scherbakovss201, Вам видней.

@AlexZaw · 24.10.2017, 02:55

Сообщение от Freeze_Breeze

В третьих медиа-запросы начинаются с 1200px.

Кто такое сказал? Может человек под 2560 верстает?

@inquisitor · 24.10.2017, 07:10 **[ТС]**

Сообщение от Freeze_Breeze

CSS
1
2
3
-webkit-background-size: cover;
background-size: cover;
background-position: top center;

объясните пожалуйста эти три свойства,применение,общее и разницу.

@Freeze_Breeze · 24.10.2017, 09:22

AlexZaw, думаю эта строчка не является нормальной @media screen and (min-width: 1366px) and (max-width: 1919px), а еще есть кикие-никакие стандарты размеров экранов 1200, 992, 768, 480, 320, а делать адаптивным изображение если min-width: 1366px и max-width: 1919px, а во всех остальных случаях она не адаптивна, это по крайне мере выглядит странновато.

Добавлено через 1 минуту
scherbakovss201, прочитай повнимательней:

Сообщение от Freeze_Breeze

Если тебе нужно, что бы фоновая картинка была адаптивной, тогда такой код:

HTML5
1
2
<section class="img">
</section>

CSS
1
2
3
4
5
6
7
8
.img {
    background-image: url(mountains.jpg);
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    background-position: top center;
    height: 987px;
}

Добавлено через 42 секунды
scherbakovss201, https://webref.ru/css - вот тут ты прочитаешь про все свойства, которые тебе не понятны.

@AlexZaw · 24.10.2017, 10:44

Не по теме:

Сообщение от Freeze_Breeze

думаю эта строчка не является нормальной @media screen and (min-width: 1366px) and (max-width: 1919px)

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

Сообщение от Freeze_Breeze

а еще есть кикие-никакие стандарты размеров экранов

хм, а чем не стандартен размер 1366 и 1920?? стандартные разрешения для ноутов и для десктопов

Сообщение от Freeze_Breeze

а делать адаптивным изображение если min-width: 1366px и max-width: 1919px, а во всех остальных случаях она не адаптивна, это по крайне мере выглядит странновато

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

Нет, я полностью поддерживаю ваши выводы, но ведь, теоретически, может быть и так как описал я

@Freeze_Breeze · 24.10.2017, 14:45

AlexZaw, нуу, что я Вам скажу. Конечно я с Вами согласен, но сначала scherbakovss201, нужна была, что бы картина отображалась на background, потом она должна была быть адаптивной, а после оказывается я ему написал неправильный код, после чего он приходит о пять спрашивает "как сделать это...", после чего оказывается ему нужна была адаптивная картинка в стилях медиа-запросов в запредельных диапазонов min-width: 1366px и max-width: 1919px (и почему не 1920px, куда пропал 1-ин пиксель, непонятно). И вообще я кушаю...

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@inquisitor 25 / 9 / 17 Регистрация: 22.12.2015 Сообщений: 2,097
	21.10.2017, 04:37 [ТС]
	IE отображает фон,а остальные браузеры отказываются. По нажатию F12 никаких ошибок.Текст размещается под изображением или над ним если переставить в html.А как сделать,что бы текст был на фоновом изображении и не сьежал при маштабировании?Картинка уменашаеться пропорционально то,что нужно.Вот так бы с текстом. 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	23.10.2017, 23:46
	scherbakovss201, Вам видней. 0

@Freeze_Breeze 278 / 272 / 106 Регистрация: 12.01.2016 Сообщений: 1,666
	24.10.2017, 14:45
	AlexZaw, нуу, что я Вам скажу. Конечно я с Вами согласен, но сначала scherbakovss201, нужна была, что бы картина отображалась на `background`, потом она должна была быть адаптивной, а после оказывается я ему написал неправильный код, после чего он приходит о пять спрашивает "как сделать это...", после чего оказывается ему нужна была адаптивная картинка в стилях медиа-запросов в запредельных диапазонов `min-width: 1366px и max-width: 1919px` (и почему не 1920px, куда пропал 1-ин пиксель, непонятно). И вообще я кушаю... 0

Почему картинка не отображается в фоне?

Решение