Why doesn't the wrapper image background show up?

Question

I want to set a background image within my wrapper div. Here's the HTML document:

<!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>

Here's my CSS file:

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

If I paste the snippet in the CSS's body section, it works as well as I do that through style inline for the body tag. But I wish to set the background for the wrapper only. It doesn't want to work!

    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>

I mean the snippet "background-image:..........;" – brainplot Jun 05 '16 at 15:56 — brainplot, Jun 05 '16 at 15:56
works for `width:1920px; height:1080px;` – mplungjan Jun 05 '16 at 16:13 — mplungjan, Jun 05 '16 at 16:13

score 0 · Accepted Answer · edited May 23 '17 at 12:16

0

Look's like your div is empty and has collapsed. Height is 0. however adding padding-top: 200%; to your css worked on my local machine. I got the idea here need-empty-div-with-background-image-to-force-height-and-must-be-responsive

width:1920px; height:1080px; also works.

edited May 23 '17 at 12:16

Community

1
1

answered Jun 05 '16 at 16:12

Jon Crawford

193
11

score 0 · Answer 2 · answered Jun 05 '16 at 22:13

0

Increase you height or you can give increase padding If design disturb by increasing padding than try to give only e.g. bottom-padding:50px; etc

I hope it will work for you. Thanks

answered Jun 05 '16 at 22:13

Jazeb Pervez Butt

1
2

Why doesn't the wrapper image background show up?

2 Answers2