When I use the background image, why does not my CSS apply to the image?

advertisements

When I use background-image why does my CSS not apply to the image? If you look at example 1 I'm using content which displays my image of myself with all the CSS. However, I need to use background-image to ensure the browsers: chrome, safari and firefox can view my image. If you run the snippets in example 2 the CSS isn't applied to the image.

Question

is it possible you can get my image to look like example 1 but using background-image with all the CSS applied like in example 1?

EXAMPLE 1

    .shape {
          border-radius: 25px;
          background: #4D5061;
          content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
          color: white;
          height: 300px;
          margin: auto;
          padding: 3px;
          width: 300px;
          top: 15%;
          left: 50%;
          position: absolute;
          margin-left: -150px;
          z-index: 10;
          }
<div class="shape"></div>

EXAMPLE 2

    .shape {
          border-radius: 25px;
          background: #4D5061;
          background-image: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
          color: white;
          height: 300px;
          margin: auto;
          padding: 3px;
          width: 300px;
          top: 15%;
          left: 50%;
          position: absolute;
          margin-left: -150px;
          z-index: 10;
          }
<div class="shape"></div>

You can use background-size:contain; to scale the background image to cover its container:

    .shape {
          border-radius: 25px;
          background: #4D5061;
          background-image: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg);
          background-size: contain;
          color: white;
          height: 300px;
          margin: auto;
          padding: 3px;
          width: 300px;
          top: 15%;
          left: 50%;
          position: absolute;
          margin-left: -150px;
          z-index: 10;
       }
<div class="shape"></div>