Фон во весь блок, текст по центру

@Эмили · Регистрация: 14.05.2013

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

Подскажите как растягивать картинку-фон во весь блок в зависимости от размера экрана?

HTML5
1
2
3
4
5
6
<div class="container-default block-1">   
            <div class="intro">
               <h5>ьолспь с ьбс м <br><br>
               мбмбмтьси то о имо</h5>
            </div>
    </div>

CSS
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
.container-default {
  width: 100%;
  max-width: 1000px;
  padding: 0 15px;
  margin: 0 auto;
  margin-top: 0%;
}
 
.intro {
    background:url(../img/abs.jpg);
    background-size: 100%;
    width: 230%;
    height:30%;
    margin-left:-50%;
    padding:0;
}
.intro h5 {padding-top:5%; }
 
.block-1 {text-align: center;}
 
h5 {
    font-weight:300;
    color: #FFFFFF; 
    font-family: "Monotype Corsiva";
    font-size: 45px;
    text-shadow: -8px -8px 0 hsl(200,100%,35%),
               -7px -7px 0 hsl(200,100%,55%),
               -6px -6px 0 hsl(200,100%,60%),
               -5px -5px 0 hsl(200,100%,65%),
               -4px -4px 0 hsl(200,100%,70%),
               -3px -3px 0 hsl(200,100%,75%),
               -2px -2px 0 hsl(200,100%,80%),
               -1px -1px 0 hsl(200,100%,85%),
               0 0 0 hsl(200,100%,95%);
  color: transparent;
  transition: all 1s;
  }
h5:hover {
    text-shadow: -8px 8px 0 hsl(80,100%,35%),
               -7px 7px 0 hsl(80,100%,55%),
               -6px 6px 0 hsl(80,100%,60%),
               -5px 5px 0 hsl(80,100%,65%),
               -4px 4px 0 hsl(80,100%,70%),
               -3px 3px 0 hsl(80,100%,75%),
               -2px 2px 0 hsl(80,100%,80%),
               -1px 1px 0 hsl(80,100%,85%),
               0 0 0 hsl(80,100%,95%);
      color: transparent;
}
@media only screen and (max-width: 800px) {
  .block-1 { overflow: hidden;}
}
@media only screen and (max-width: 800px) {
  .container-default{ 
   position: relative;
   display: block; 
  }
}
 
@media (max-width: 580px){p{font-size:calc(12px + 1vw)}}
@media (max-width: 450px){.intro h5{font-size:calc(16px + 1vw)}}

@Fedor92 · 04.11.2016, 13:23

Эмили, может так?

CSS
1
2
3
4
5
6
7
.intro {
    background:url(../img/abs.jpg) no-repeat 0/cover;
    width: 230%;
    height:30%;
    margin-left:-50%;
    padding:0;
}

@mrtoxas · 04.11.2016, 13:24

Эмили, к прочтению: background-size

@Эмили · 04.11.2016, 13:28 **[ТС]**

Fedor92, в ширину растянулся а вот в высоту не изменился

mrtoxas, я это пробовала но ничего не получалось

@Fedor92 · 04.11.2016, 13:50

Эмили, фон занял ровно столько места, сколько Вы под него отвели...

@Эмили · 04.11.2016, 14:56 **[ТС]**

Fedor92, а что надо увеличить чтобы он был вплотную сверху? или дописать?

@mrtoxas · 04.11.2016, 15:05

Дописать

CSS
1
2
3
.intro {
  overflow: hidden;
}

@Эмили · 04.11.2016, 15:35 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .	модель ЗдравоСохранения 5. Меньше увольнений- больше дохода! anaschu 24.03.2026 Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .	Midnight Chicago Blues kumehtar 24.03.2026 Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	04.11.2016, 13:24
	Эмили, к прочтению: background-size 0

@Эмили 1 / 1 / 1 Регистрация: 14.05.2013 Сообщений: 379
	04.11.2016, 13:28 [ТС]
	Fedor92, в ширину растянулся а вот в высоту не изменился mrtoxas, я это пробовала но ничего не получалось 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	04.11.2016, 13:50
	Эмили, фон занял ровно столько места, сколько Вы под него отвели... 0

@Эмили 1 / 1 / 1 Регистрация: 14.05.2013 Сообщений: 379
	04.11.2016, 14:56 [ТС]
	Fedor92, а что надо увеличить чтобы он был вплотную сверху? или дописать? 0

@Эмили 1 / 1 / 1 Регистрация: 14.05.2013 Сообщений: 379
	04.11.2016, 15:35 [ТС]
	mrtoxas, через компьютер нормально отображается а вот в телефоне сверху и снизу пробелы что мне дописать чтобы текст при уменьшении экрана если надо уменьшался и влазил в экран? 0