My pharmacy is using a Raspberry Pi and Screenly-OSE for our Digital Signage solution. We showcase various ads along with the overnights using a simple Sinatra application to serve overnights. Everything works great, but there's a pesky white space that bothers me a lot, you can see it in this picture.
In my setup, I have a very basic css file:
body {
/* background-color: #246013; */
background-image:url('moon.jpg');
color: white;
text-align: center;
font: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#wrapper{
width:1200px;
margin:0 auto;
text-align: center;
}
#content{
text-align: center;
margin:auto;
}
#footer{
text-align: center;
padding-top: 30px;
color: #D6D6D6;
font: 14px "Courier New", Courier, mono;
}
h1 {
font-size: 80px;
padding-top: 10px;
font-weight: bold;
text-align: center;
}
h2 {
text-align: center;
font-size: 60px;
font-weight: bold;
}
h3 {
text-align: center;
font-size: 32px;
padding-top: 10px;
padding-bottom: 3px;
font-weight: bold;
}
h4 {
text-align: left;
font-size: 25px;
padding-top: 5px;
padding-bottom: 3px;
text-decoration: underline;
}
h5 {
text-align: left;
font-size: 23px;
padding-top: 5px;
padding-bottom: 3px;
font-weight: bold;
}
I am looking for a way to achieve full-screen background cover. The background image should cover the entire screen, adapting to the amount of text displayed. Some days, when there are 5 or 6 overdays displayed, the entire screen should be covered.
I am aware of the manual methods like adding br/ or counting text lines, but I am curious if there is a more natural way to achieve this.
Thank you!