Menu
I am trying to turn images that appear on the site using the tag into a background image. MY first code looked like this
Html:
<img class= "house" src="images/House-03.png" width="122px" height="118px"/>
CSS
.house {
display:block;
position:absolute;
float:right;
bottom:0;
right:0;
}
Now I'm trying to change it like this:
Html
<p class= "house"> </p>
CSS
.house {
display:block;
position:absolute;
background-image:url(../images/House-03.png);
width:122px;
height:148px;
float:right;
bottom:0;
right:0;
}
Except the image doesn't appear! Any help will be appreciated, Thanks!
661
Make sure the image path is set correctly in the background-image url. Once you have made sure that your CSS file is linked correctly, also check that the image itself is set correctly. Again, you will want to open your code inspector in the browser to check.
I recommend moving your css from the inline scope. Assuming that your . png file actually exists, try setting the background size and repeat tags. If that doesn't work, try checking in your browser's developer tools for the response codes and making sure that the url is correct.
There are several possible reasons why your images are not showing up on your pages as expected: The image file is not located in the same location that is specified in your IMG tag. The image does not have the same file name as specified in your IMG tag. The image file is corrupt or damaged.
Make sure your image is accessible!
After a lot of frustration, it turned out that my problem had to do with the image not being accessible... You can always test out your code with another image on another site that is certainly accessible...
133
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
