Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

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

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

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

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 :)