Question

我正在使用Raspberry Pi和Screenly-OSE作为我们药房的数字标牌解决方案。我展示了各种广告以及过夜。我正在使用一个非常简单的Sinatra应用程序来serve overnights。效果很好，除了一个让我烦恼的小细节，那里有一个空白区域：见picture。

我正在使用以下非常简单的css文件：

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;
}

我想知道是否有办法获得全屏幕背景。背景图片封面与文字一起显示，有些日子显示过剩，如果过夜是5或6，则整个屏幕都会被覆盖。

我知道我可以通过添加br/和/或计算显示的文本行来模拟此行为。但我想知道是否还有其他更多自然方法来实现这一目标。

由于

Answer 1

确保将html和body都设置为100％高度以使其覆盖所有内容。

html, body {
    height: 100%;
}

网站背景全屏数字标牌系统

1 个答案: