As a newcomer to Bootstrap, I am embarking on my first website creation experience. The header of my site is designed to look like the image below:
https://i.sstatic.net/WTp2g.jpg
I want this image to adjust responsively on medium-sized and larger devices, but on smaller screens, I require it to be cropped from the center, resembling the one shown in this image:
https://i.sstatic.net/GeYa3.jpg
Despite my attempts, I have not been successful in achieving this effect. How can I go about doing this?
Below is the code I have implemented. While it functions to some extent, the visual outcome is less than desirable.
<div class="row">
<div class="col" id="header-image">
<img src="images/head.jpg" class="img-fluid" style="z-index: -1; visibility: hidden">
</div>
</div>
<style type="text/css">
@media only screen and (max-width: 768px) {
#header image{
background-position: center !important;
background-size: auto 100% !important;
height: 217px;
}
}
#header #header-image{
background-image: url("images/head.jpg");
background-size: 100% auto ;
background-position: center;
}