I am completely new to all of this, so please bear with me. Here's my current situation:
So, I've set a background image for the entire body of my website. I have a div called .wrapper that I use on all of my pages. Its main purpose is to keep my content centered and organized, with a grey background color defined. Now within the .wrapper div, there is another div titled .example.
The problem arises when I want this specific .example div to have the background image of the body instead of inheriting the .wrapper's background color. However, I still want it to maintain the other properties of the .wrapper. Is this even possible? I attempted not to set the background-image of the .example the same as the body’s because it seems like an "outsider" element...
<html>
...
<body>
<div class="wrapper">
<div class="example">
<img src="example.png">
</div>
</div> <!-- Wrapper -->
</body>
</html>
body {
background: #ffffff url("bg.jpg") repeat;
background-size: 4%;
background-position: center;
}
.wrapper {
width: 80vw;
margin: auto;
padding: 0px 0px;
background: #e9eaed;
display: block;
}
.example {
width: 100%;
<!-- background-color: #f6c5b6;-->
}
.example img {
width:40%;
margin: 40px auto;
display: block;
}