CODEWITHSUNDEEP
htmlcss
l.docherty1
l.docherty1

Reputation: 93

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

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>

Upvotes: 1

Views: 91

Answers (2)

dattebayo
dattebayo

Reputation: 1402

For this image you can use both background-image : 'cover' or 'contain' It will limit the image within the container.

Here is their difference. http://cdn.onextrapixel.com/wp-content/uploads/2012/02/cover-contain.jpg

Upvotes: 3

Koby Douek
Koby Douek

Reputation: 16675

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>

Upvotes: 4

Related Questions