Despite the navbar, the Cover section could be the very first thing that will appear in your web page. Full-width images or blurry background videos are captivating tools that could help you delivering your message or gaining the visitor's attention. Here you will see how to create and customize a Cover section with a background image.
First of all click on the SECTION icon on the left panel
Drag and drop the Cover section in the position you prefer. You will notice that the right inspector has switched to the ELEMENT tab. There you have all the settings to fully customize this section. To start you can modify the height to 75%
Inserting a background image is just one step away: there's a field called IMAGE. Paste there the URL of the picture that you want to set as your cover and the trick is done. It could be an absolute URL or a link to a local directory, depending on where the image is stored. In this case we are using a free picture from Unsplash.
It seems that the white text isn't suiting the image. On the right inspector there's the COLOR selector that would change the element color. In this case info seems a much better option than white. Eventually you can double-clicking on the text to edit it.
Clicking on the HTML source panel at the bottom let you see the new section, that corresponds to the HTML code below here:
<div class="text-center d-flex align-items-center bg-primary h-75" style="background-image: url("https://unsplash.it/1500?image=739");">
<h1 class="display-1 text-info">Hero section</h1>
<p class="lead text-info">Now you have a <i>killer </i>starting point for your website.</p>
<a href="#" class="btn btn-lg btn-secondary">Keep on exploring</a>