Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Patrik Franzén Dennis
Patrik Franzén Dennis
2,636 Points
Posted by Patrik Franzén Dennis
Patrik Franzén Dennis
2,636 Points

Background-image vs Img??

I was wondering what is better to use?

The img src=""

or the

.picture { background-image: url("") }

What is the main difference and what should be used? Is there any rule when to use one or the other??

Would be great to hear your answers =)

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Patrik,

It really depends on what the purpose of the image is.

Keep in mind that html is for the stucture/content of your page and css is for styling purposes.

If your image is a part of the content of the page then it belongs in the html using <img src=""> So for example, you might have images to show off in your portfolio. These images are the main point of your page and you would want them in the html as part of the overall structure/content of the page.

If on the other hand, the image exists for stylistic purposes as part of the design and isn't an essential image then it should be in the css as a background image. As an example, this could be some landscape type image that you might have as a background in your header. Or just any other type of image that might be there to make it look better.

So I wouldn't say that one is better than the other but rather, each one has it's own purpose.

Patrik Franzén Dennis
Patrik Franzén Dennis
2,636 Points
Patrik Franzén Dennis
Patrik Franzén Dennis
2,636 Points

Wow that really helped! I now understand the main differences, which was the goal of the question!:)

James Arroyo
James Arroyo
645 Points
James Arroyo
James Arroyo
645 Points

I personally try and go with 'img src', by doing so you can use its 'alt' property which can significantly help bring exposure to your website by being found by search engines :)