-6
Я работаю над проектом для своей темы, в котором я создал сайт для обслуживания. К сожалению, я нахожусь в состоянии, не происходит должным образом скриншота страницы является: 
Заполните регион черным цветом
Я хочу, чтобы заполнить область красного ящика всей с черным цветом фона.
Html код: `
<body background="black">
<div id=pagehead>
<div class=imagehead>
<img class=imageheadsrc src="./pics/back.jpg">
</div>
<div class=texthead>
<p class=textheadsrc>CaRental.com</p>
</div>
</div><br>
<br><br>
<button id="myBtn">Login</button>
<button id="myBtn">Register</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">x</span>
<p>Some text in the Modal..</p>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</div>
</body>
</html>`
CSS КОД:
*html{
background-color:black;
}
body{
background-color:black;
}
#pagehead
{
width:100%;
height: 700px;
}
.imagehead
{
width:100%;
height:100%;
background-position: absolute;
background-size: cover;
}
.imageheadsrc
{
width:100%;
height:100%;
background-size: cover;
z-index: 0;
}
.texthead
{
padding-top: 0;
margin-top:0%;
z-index: -1;
}
.textheadsrc{
position: relative;
font-size: 3em;
font-weight: bold;
margin:10px 12px auto 10px;
color:black;
text-align:center;
font-family: 'Josefin Sans', sans-serif;
}
button {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
padding: 15px 50px;
position:center;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 4px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
button:hover {
background-color: #4CAF50; /* Green */
color: white;
text-decoration: none;
}
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
Пожалуйста направьте меня к этому, как я новичок в HTML и CSS.
.texthead { padding-top: 0; margin-top: 0%; z-index: -1; background: # 000; color: #fff } – devpro