I am looking to add a background image specifically within the wrapper div on my website. Below is 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 is the content of my CSS file:
body {
background-color: #020111;
}
#wrapper {
background-image: url('http://example.com/wp-content/themes/theme/background.jpg');
background-color: #020111;
background-size: cover;
width: 960px;
height: auto;
}
I have tried adding the snippet both in the CSS body section and through inline styling for the body tag, but I want the background to be applied only to the wrapper. However, it does not seem to be working as expected!
body {
background-color: #020111;
}
#wrapper {
background-image: url('http://example.com/wp-content/themes/theme/background.jpg');
background-color: #020111;
background-size: cover;
width: 960px;
height: auto;
}<div id="wrapper">
some text
</div>