Let's set the scene:
This screenshot showcases www.dreamstreetentertainment.com, a site that is still a work in progress but is already live. Don't inquire about it. The client insists on this setup. Essentially, I have an empty space to the right and a repeating image to the bottom right.
The background consists of various elements:
- The moving segments of CLOUDS over the
- Sky as the backdrop
- The HOLLYWOOD /Los Angeles skyline
- The pathway leading to Hollywood
- The individual LAMPS and CSS configuration
ISSUE:
The Client uses 27" Monitors while what I'm seeing (using a 22" monitor) is only a SIMULATED version scaled down to 80% of the full screen.
SOLUTION:
How can I resolve the blank WHITE SPACE on the side and the repetitive image at the lower RIGHT BOTTOM?
Look at the
html,
body {
margin: 0;
min-height: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
color: #ffffff;
background-color: rgba(0, 0, 0, 0);
font-size: 18px;
line-height: 1.8em;
padding-top: 90px;
display: flex;
flex-direction: column;
}
Also, check out the OVERRIDE in custom-ds.css
html, body {
height: 100%;
padding: 0;
margin: 0;
}
However, the issue persists.
I've utilized backstretch.js on other websites I've developed, but this one poses a challenge due to the background division at the HORIZON between the SEA and SKY.
Any ideas?