CODEWITHSUNDEEP
htmlcss
C. Felipe
C. Felipe

Reputation: 469

Adding images in CSS instead of links in HTML?

How can I add my portfolio images into CSS and keep the same look as it is in this fiddle: http://jsfiddle.net/Q535e/

<section>
</section>

I am learning how to make a portfolio section of my website and for this purpose I just added some random links to HTML, but now I want to download those images and save them into "images" folder. So, the images should be called from my hard disc ("images" folder) instead from web links.

Thanks in advance!

Upvotes: 2

Views: 1489

Answers (3)

stackErr
stackErr

Reputation: 4170

If i understand you correctly, you need to download all the images you need on to your hard drive. Then save them into the "images" folder that you mentioned.

Now change your html from this:

<img alt="Tour Eiffel" src="http://www.travelskyline.net/wallpapers/eiffel_tower_paris_france-800x600.jpg">

To:

<img alt="Tour Eiffel" src="images/eiffel_tower_paris_france-800x600.jpg">

Do this for all the images you have.

Upvotes: 1

CaribouCode
CaribouCode

Reputation: 14398

Not quite sure what you mean about the image location. You can do that for both img tags and images implemented through CSS.

However, you can achieve what you're after using the background-image css rule on the links and set height, width and display:block on those links.

Upvotes: 0

eclipsis
eclipsis

Reputation: 1550

Assign the background-image property to the div you want the image in. For example:

HTML:

<div class="projectshot">...</div>

CSS:

.projectshot {
    background-image: url("image.jpg");
}

And if I'm understanding your wording right, you can't make an image on your hard drive the source of an image on a web site. The image has to be hosted on a server.

Upvotes: 2

Related Questions