title: Image in div with :after or :before?
body: <p>I'm trying to have a background image to the right of a div, which isn't covering the whole div. </p>
  
  <p>Right now it's like this (div1 is background-color):</p>
  
  <pre><code>&lt;div id="div1"&gt;
      &lt;div id="image"&gt;&lt;/div&gt;
      Text
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.div1 {
      background: #324458;
      color: #FFF;
      font-size: 0.9em;
      font-weight: bold;
      padding: 10px;
      width: 100%;
      position: relative;
      border-radius:4px;
      height:40px;
      clear:both;
      overflow: hidden;
  }
  
  .image {
      background: url("url here");
      background-position: center center;
      background-size: cover;
      opacity: 0.3;
      height: 39px;
      margin: -10px;
      width: 300px;
      position:absolute;
      right: 10px;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      z-index: 0;
  }
  </code></pre>
  
  <p>But is it possible to have the image shown in it without having it as a div inside div1? Like using <code>:after</code>, <code>:before</code> or something else? I only want the div <code>image</code> to show to the right of div1 and be X width.</p>