Currently, I am in the process of working on a complex project for a client. The task at hand involves designing a full screen landing page that must be compatible with various window sizes as well as mobile devices (responsive design). However, I am facing an issue where I cannot get the image to cover the entire page within the designated div (slider-full-width). It is imperative that this div spans the entire window width. To better illustrate my goal, I have provided an image for reference. It is worth noting that I am utilizing the Skeleton Framework for this project (). Moreover, it is essential that users can continue scrolling down to access the remaining content on the page following the full screen landing section.
Here is a snippet of my HTML:
<div id="slider-full-width">
<div class="container">
<h2>Seeking a refreshening management service?</h2>
<h2>You've come to the right place</h2>
<div id="button-bg">
<a href="properties.html" class="presentation-button">Properties</a>
<a href="#body-span-class" class="presentation-button">See why</a>
</div>
Below is an excerpt from my CSS stylesheet:
#slider-full-width{
width: 100%;
background-image: url('../img/slide-01.jpg');
position:relative;
text-align: center;}
#slider-full-width h2 {
color: #efefef;
}
Your assistance is greatly appreciated in advance!