Question

HTML：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
    <header>
        <h1>California Road Trip</h1>
        <h2>Driving the Coast of California</h2>
    </header>

    <p>
        Highway 1 is the infamous winding stretch of road that follows the pacific coast of the U.S. Visit this sit for a virtual experience. <i>Bon voyage!</i>
        <br />
        <b>Call for help now!</b>
    </p>

    <p>
        <video controls="controls" autoplay height="300" width="500" loop>
            <source src="20160628_110323_64628293200884.mp4" type="video/mp4" />
        </video>
    </p>

    <div>
        <img src="columbus-nav-850x637.jpg" alt="Background Image" />
    </div>

    <footer>
        Copyright &copy; 2016.
    </footer>
</body>
</html>

CSS：

header{
    color: #000;
    text-align: center;
    border: 500px;
    background-color: rgba(255, 190, 0, .5);
    border-radius: 20px;
}

p{
    text-align: left;
    margin-left: 20px;
    font-family: sans-serif, Arial, 'Myriad Pro';
}

div{
    position: fixed;
    top: 20px;
    z-index: -1;
    opacity: .5;
    background-size: cover;
}

footer{
    position: fixed;
    bottom: 10px;
    margin-left: 10px;
}

背景图片没有占据整个屏幕。任何帮助表示赞赏。

这是JSfiddle

Answer 1

你必须设置div img而不仅仅是div。给元素一个100％的高度和宽度，它应该覆盖视口。

div img {
   position: fixed;
    top: 20px;
    z-index: -1;
    opacity: .5;
    background-size: cover;
    height: 100%;
    width: 100%
}

Answer 2

背景图片是css属性，但您尝试将其应用于图片代码。你会想做这样的事情：

HTML：

<div class="myBackground"></div>

CSS：

.myBackground{
   background-image: url(columbus-nav-850x637.jpg);
   background-size: cover;
   /*You can make this background fixed on desktop by adding this:*/
   background-attachment: fixed;
}

Answer 3

将这些属性添加到css文件中的div部分 {

-moz-background-size：cover;

-o-background-size：cover;

-webkit-background-size：cover;

}

Answer 4

您希望用作页面背景的图片位于小于页面大小的div中。因此，即使图像填充了div，它也不会填满页面。

其中一种可能的解决方案是按照Richard的建议直接在身体上应用背景图像。

但是，如果您希望图像位于单独的div中，则首先需要将div覆盖整个页面。对CSS属性的轻微更新应该这样做。

public Card(String title, String description)

接下来你需要让图像覆盖整个div。您可以通过设置

来完成

List<Card> cardsList = new ArrayList<Card>();
database = openOrCreateDatabase("your_db", SQLiteDatabase.OPEN_READWRITE, null);
if(database!=null)
{
    c= database.rawQuery(QUERY, null);
    c.moveToFirst();
    while(c.isAfterLast()==false)
    {
        Card card = new Card(c.getString(c.getColumnIndex("title")),
                             c.getString(c.getColumnIndex("description")));
        cardsList.add(card);
        c.moveToNext();
    }

}
database.close();
c.close();

在img标签上，或者完全删除img标签并添加

div{
    position: fixed;
    top: 20px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    opacity: .5;
    background-size: cover;
}

在css中为div本身。您可能还需要在＆＃34;背景＆＃34;上设置正确的z-index。 div将其分层放在页面的其他内容之后。

Answer 5

请注意“ background-attachment”参数。它不应具有“固定”值！

背景大小封面不起作用

5 个答案: