Search code examples
cssexternal

CSS Styling not working in external file using background-image

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.

Solution

  • 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