CSS Styling not working in external file using background-image

Question

I'm using media queries so I am passing the image to the html page from the external css file but the styling only works if I call the image directly from the html file but not from the external css file.

HTML code:
<img id="photo" class="photo-frame">

External css code:
#photo {
    background: url('/images/example-photo.jpg') no-repeat;
    width: 200px;
    height: 200px;
}

.photo-frame {
    float: left;
    padding: 10px 10px 30px 10px;
    background-color: #fff !important;
    box-shadow: 2px 2px 3px #aaa;
    transform: rotate(7deg);
    -moz-transform: rotate(7deg);
    -webkit-transform: rotate(7deg);
    -o-transform: rotate(7deg);
    -ms-transform: rotate(7deg);
}

So this is to make the photo look like a polaroid photo tilted to one side, the problem I get is the border is not showing white but just a line showing where the border starts. It works okay when I reference the photo from the HTML page and call the photo-frame class but not when I apply an id and pass over the image externally.

Answer 1

use <div id="photo" class="photo-frame">

whats happening in <img id="photo" class="photo-frame"> is there is no src attribute so img tag becomes invalid. and secondly check if the url relative the stylesheet's location and not the html page's location. this is a common mistake

Answer 2

Why not using a div-tag? And check if the url to the image is right. /images/... will refer to a directory on root level. ./images/... will refer to a directory in the same level as the css-file and ../images/... will refer to a directory in a level up from the directory with your css.

Answer 3

Try to remove th !important property from background-color of photo-frame class and add !important to background property of #photo in external css and also use div tag instead of image tag.