Независимо от того, что я делаю, я не могу получить свое изображение в div .container, чтобы правильно отображаться при форматировании с помощью CSS. Показывается только верхняя ~ 10% изображения. Если я поставлю тег img в HTML, он будет работать отлично. Но я хочу форматировать в CSS, а не в HTML, и в таком случае, что он совместим с мобильным телефоном. Я хочу, чтобы изображение было центрировано и больше, чем в настоящее время отображается. Вот мой HTML:CSS - фоновое изображение не отображается правильно
<!DOCTYPE html>
<html lang="en-US">
<link rel="stylesheet" type="text/css" href="RABstyle.css">
<title>Home</title>
<meta charset = "UTF-8">
<meta name="author" content="Beth Bennett">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<header>
<div class="icons"><p>Icons</p></div>
<ul class = "buttons">
<button id="LogIn" type="button">Log In</button>
<button id="SignUp" type="button">Sign Up</button>
</ul>
</header>
<div class="container">
<h2 class="intro">America's source for....</h2>
<ul class="selector">
<li class="active"><a href="#">Ds</a></li>
<li><a href="#">Cs</a></li>
<li><a href="#">Or</a></li>
</ul>
</div>
</body>
</html>
А вот мой CSS:
* {
box-sizing: border-box;
margin: 0px;
padding:0px;
font-family: Calibri, Helvetica, sans-serif;
}
body {
background-color:#ffffE0;
}
header {
background-color: #AA0000;
height: 75px;
padding: 15px;
}
.icons{
float: left;
margin-left: 100px;
}
.buttons {
text-align: right;
margin-right: 300px;
}
.container {
background: url("HomePageImageFinal.svg") no-repeat;
background-position: center top;
background-size: 1500px 1000px;
}
Дайте нам живую ссылку на ваш html-файл, где будет показано фоновое изображение? –