Currently, I am in the process of designing a website for a restaurant, hotel, and vineyard. My goal is to create three separate websites that are linked through one introductory page.
The concept for the intro page involves three columns displayed side by side, each column showcasing a picture related to the specific site it represents, filling the full height of the screen.
To achieve this layout, I have implemented the following code:
Using Bootstrap Columns:
<div class="row intro-div no-gutters">
<div class="col-md-4 fill-res"></div>
<div class="col-md-4 fill-wein"></div>
<div class="col-md-4 fill-hotel"></div>
</div>
CSS Styles:
.fill-hotel{
height:100%;
min-height:100%;
background-image: url('../images/intro-hotel.jpg');
background-repeat: no-repeat;
background-position: top center;
background-color: #000000;
}
While this design appears pleasing on my screen and adjusts responsively when resizing the browser, there is an issue with how the image displays. For instance, on a larger screen, certain elements of the picture may get cropped out on a smaller screen.
Can anyone offer suggestions or solutions to address this concern?