Being a novice in HTML and CSS, I am facing the challenge of displaying an image as a banner with text overlay. Despite trying various methods, it seems impossible to achieve this directly with an image element, so I resorted to using CSS's background feature. However, the issue I'm currently encountering is that only the top half of the image is being displayed.
Here is the image I'm attempting to showcase
This is my current setup:
https://i.sstatic.net/4LP21.jpg
Everything works well, including the aspect ratio of the image, but I now aim to center the display on the middle section, similar to this:
https://i.sstatic.net/GcRV7.jpg
I want less of the clouds and more focus on the mountains. How can I crop the background image to center it on the middle portion?
body {
background-size: cover;
background-position: center;
}
body,
html {
width: 100%;
height: 100%;
font-family: "Lato";
color: white;
margin: 0;
padding: 0;
}
h1 {
font-weight: 700;
font-size: 5em;
}
.content {
padding-top: 10%;
text-align: center;
text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}
.headerText {
padding-top: 10%;
}
hr {
width: 400px;
border-top: 0.5px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
p {
color: blue;
}
#banner {
width: 100%;
background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;
background-size: cover;
}
#banner h4 {
padding-bottom: 100px;
}<html>
<head>
<title>Website Sample Project</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a><img src="https://via.placeholder.com/100x40"></a>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Locations</a>
<div class="dropdown-menu" aria-labelledby="dropdown01">
<a class="dropdown-item" href="locations/narnia.html">Narnia</a>
<a class="dropdown-item" href="#">Neverland</a>
<a class="dropdown-item" href="#">Somewhere</a>
<a class="dropdown-item" href="#">Nowhere</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</nav>
<section id="banner">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="content">
<a><img src="https://via.placeholder.com/600x160"></a>
<div class="headerText">
<h3>Sample Text</h3>
</div>
<hr>
<h4>Sample Text</h4>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>