CODEWITHSUNDEEP
cssexternal
Nosnibor
Nosnibor

Reputation: 153

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.

Upvotes: 1

Views: 174

Answers (3)

Pranil Tunga
Pranil Tunga

Reputation: 76

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.

Upvotes: 0

Sagi_Avinash_Varma
Sagi_Avinash_Varma

Reputation: 1509

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

Upvotes: 1

LetsGoRangers
LetsGoRangers

Reputation: 640

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.

Upvotes: 1

Related Questions