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.

Sagi_Avinash_Varma · Accepted Answer · 2014-04-06 16:20:05Z

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

answered Apr 6, 2014 at 16:20

Sagi_Avinash_Varma

1,50912 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

LetsGoRangers · Accepted Answer · 2014-04-06 15:42:30Z

1

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.

answered Apr 6, 2014 at 15:42

LetsGoRangers

6401 gold badge7 silver badges18 bronze badges

Comments

Pranil Tunga · Accepted Answer · 2019-05-27 05:01:05Z

0

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.

answered May 27, 2019 at 5:01

Pranil Tunga

767 bronze badges

Collectives™ on Stack Overflow

CSS Styling not working in external file using background-image

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related