Question

我想在包装器div中设置背景图像。这是HTML文档：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <title><?php echo get_bloginfo_rss('name'); ?> | <?php echo get_bloginfo_rss('description'); ?></title>
    <link rel="shortcut icon" href="<?php echo get_template_directory_uri (); ?>/genericons/favicon.ico" type="image/x-icon"/>
    <link rel="icon" href="<?php echo get_template_directory_uri(); ?>/genericons/favicon.png" type="image/png"/>
    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css"/>
    <?php wp_head(); ?>
</head>
<body>
    <div id="wrapper">

        <?php wp_footer(); ?>

    </div>
</body>
</html>

这是我的CSS文件：

body {
    background-color: #020111;
}

#wrapper {
    background-image: url('http://trytoknow.altervista.org/wp-content/themes/ttktheme/background.bmp');
    background-color: #020111;
    background-size: cover;
    width: 960px;
    height: auto;
}

如果我将片段粘贴到CSS的正文部分中，它的工作方式与我通过样式内联的body标签一样。但我希望只为包装器设置背景。它不想工作！

    body {
      background-color: #020111;
    }
    #wrapper {
      background-image: url('http://trytoknow.altervista.org/wp-content/themes/ttktheme/background.bmp');
      background-color: #020111;
      background-size: cover;
      width: 960px;
      height: auto;
    }

<div id="wrapper">

some text

</div>

Answer 1

看起来你的div是空的并且已经崩溃了。高度为0.但是添加填充顶部：200％;你的css在我的本地机器上运行。我在这里得到了这个想法need-empty-div-with-background-image-to-force-height-and-must-be-responsive

宽度：1920px;高度：1080px;也有效。

Answer 2

增加你的身高或者你可以增加填充如果设计通过增加填充来干扰而不是仅仅给出例如底填充：50像素;等

我希望它对你有用。感谢

为什么包装图像背景不显示？

2 个答案: