Фон не по всей странице

Действительно глупый вопрос (я думаю), но почему мой фон не по всей странице? В верхней части страницы я вижу только небольшой бар.Фон не по всей странице

Мой код:

Html

<body> 
<div class="homepage"> 
<div class="headtext"> 
<h3>Text1</h3> 
<h5>Text2</h5> 
</div> 
<div class="input"> 
<input> </input> 
</div> 
</div> 
</body>

Css

* { 
margin: 0; 
padding: 0; 
border: 0; 
outline: 0; 
font-size: 100%; 
vertical-align: baseline; 
background: transparent; 
} 

.homepage { 
background: #FF4632; 
} 

.headtext { 
position: fixed; 
left: 50%; 
transform: translate(-50%, 0); 
top: 25%; 
} 

.headtext h3 { 
text-align: center; 
font-family: 'Questrial', sans-serif; 
} 

.headtext h5 { 
text-align: center; 
font-family: 'Questrial', sans-serif; 
}

Спасибо за помощь мне

источник

2016-12-07 Julian

При визуализации в браузере ваш HTML-код (и все) не принимает полную страницу. Если вы нанесете определенный цвет фона на свою страницу, вы увидите только этот цвет фона, помещенный в фон вашего элемента '.homepage' и всех дочерних элементов. Вам нужен способ применить цвет фона к полной странице, например, в теге '', поэтому вместо применения фона на '.homepage' вы в конечном итоге применяете его на' html'. См. [Здесь] (http://www.quackit.com/html/codes/html_background_codes.cfm) – Artemis

добавить высоту: 100vh; к классу .homepage, чтобы он расширялся до всего экрана. – Chiller

Решение 1: position:fixed;.homepage

Дайте position:fixed; height:100%;width:100%; к .homepage применить цвет фона для всего тела

* { 
 
margin: 0; 
 
padding: 0; 
 
border: 0; 
 
outline: 0; 
 
font-size: 100%; 
 
vertical-align: baseline; 
 
background: transparent; 
 
} 
 

 
.homepage { 
 
background: #FF4632; 
 
    position:fixed; 
 
    height:100%; 
 
    width:100%; 
 
} 
 

 
.headtext { 
 
position: fixed; 
 
left: 50%; 
 
transform: translate(-50%, 0); 
 
top: 25%; 
 
} 
 

 
.headtext h3 { 
 
text-align: center; 
 
font-family: 'Questrial', sans-serif; 
 
} 
 

 
.headtext h5 { 
 
text-align: center; 
 
font-family: 'Questrial', sans-serif; 
 
}

<body> 
 
<div class="homepage"> 
 
<div class="headtext"> 
 
<h3>Text1</h3> 
 
<h5>Text2</h5> 
 
</div> 
 
<div class="input"> 
 
<input/> 
 
</div> 
 
</div> 
 
</body>

Решение 2: применить цвет фона для всего тела

* { 
 
margin: 0; 
 
padding: 0; 
 
border: 0; 
 
outline: 0; 
 
font-size: 100%; 
 
vertical-align: baseline; 
 
background: transparent; 
 
} 
 

 
body{ 
 
background: #FF4632; 
 
} 
 

 
.headtext { 
 
position: fixed; 
 
left: 50%; 
 
transform: translate(-50%, 0); 
 
top: 25%; 
 
} 
 

 
.headtext h3 { 
 
text-align: center; 
 
font-family: 'Questrial', sans-serif; 
 
} 
 

 
.headtext h5 { 
 
text-align: center; 
 
font-family: 'Questrial', sans-serif; 
 
}

<body> 
 
<div class="homepage"> 
 
<div class="headtext"> 
 
<h3>Text1</h3> 
 
<h5>Text2</h5> 
 
</div> 
 
<div class="input"> 
 
<input/> 
 
</div> 
 
</div> 
 
</body>

источник

2016-12-07 19:16:04 jafarbtech

Спасибо! :-) Сейчас я чувствую себя глупо. – Julian

Положите цвет фона на вашем теле элемента, а не отд.

body { 
    background: #FF4632; 
}

источник

2016-12-07 19:09:54

body { 
background: #FF4632; 
}

заменить .homepage с body

источник

2016-12-07 19:16:45

Основная причина в том, что, когда вы стилизации теги заголовков, он больше не находится на «домашней странице» div.

Смотреть это JS скрипку -

https://jsfiddle.net/tqok771m/

.headtext { 
    position: fixed; 
    left: 50%; 
    transform: translate(-50%, 0); 
    top: 25%; 
}

Это связано с вашим использованием position: fixed;

Одно простое решение заключается в установке высоты на вашей домашней странице DIV с чем-то вроде высоте: 1000px;

источник

2016-12-07 19:17:02

Фон не по всей странице

ответ

Смежные вопросы