Adding images in CSS instead of links in HTML?

Question

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!

are you creating this website from your computer? Or is it being hosted by someone? — stackErr
– stackErr, Commented Jul 31, 2013 at 15:19
Are you asking how to upload your own images to a web server? This is not really a CSS question. Can you please clarify? — aaronburrows
– aaronburrows, Commented Jul 31, 2013 at 15:20
@stackErr Everything is on my computer, it's not hosted anywhere. — C. Felipe
– C. Felipe, Commented Jul 31, 2013 at 15:21
you want to call this images from images folder with help of css??? — Ankit
– Ankit, Commented Jul 31, 2013 at 15:23
No. CSS is for styling, not content. HTML is where you want your content. Since these are portfolio images, and not just decoration, they are, by definition, content. As far as adding them to your code, you need to make sure the images are in the same area as the rest of your site code (in a subfolder most likely), and you link to them relative to your file ("../images/sample.jpg") or relative to the root of your site, assuming you have a website set up ("/path/to/images/sample.jpg"). — aaronburrows
– aaronburrows, Commented Jul 31, 2013 at 15:35

eclipsis · Accepted Answer · 2013-07-31 15:17:26Z

2

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.

answered Jul 31, 2013 at 15:17

eclipsis

1,5503 gold badges25 silver badges56 bronze badges

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

Comments

stackErr · Accepted Answer · 2013-07-31 15:23:20Z

1

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.

answered Jul 31, 2013 at 15:23

stackErr

4,1704 gold badges27 silver badges50 bronze badges

5 Comments

C. Felipe Over a year ago

Ha~ Thanks! I guess this is what I was looking for! I will test it ASAP. I actually did that before but for some reason (it's really hot today) I thought I need to "move" my images into CSS, so I confused myself :) Thanks!

stackErr Over a year ago

Heres how to think about CSS. CSS only does the "look and formatting" of your webpage, so when you say you want to add images into your CSS, it sounds weird. You dont add images to CSS, you describe how they look in CSS.

C. Felipe Over a year ago

Thanks! I'll keep your advice on my mind. Appreciate your help! Btw, I just tried your suggestion from above and it works as I wanted it to work :)

C. Felipe Over a year ago

Thanks! Another small question: what's the point of adding alt="Tour Eiffel" when it's not visible upon the whole website is loaded???

stackErr Over a year ago

it is useful to people who cant view the image for some reason (blind, image not loaded, etc). It describes what the image is to those people. read more here: w3.org/QA/Tips/altAttribute If you want to test this out, try renaming one of your images in your images folder but dont change the HTML. you will see the Alt text.

CaribouCode · Accepted Answer · 2013-07-31 15:17:53Z

0

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.

answered Jul 31, 2013 at 15:17

CaribouCode

14.5k33 gold badges113 silver badges187 bronze badges

Collectives™ on Stack Overflow

Adding images in CSS instead of links in HTML?

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related