hello friends . I want to create a banner section in a webpage. but I am confused about which method should i use for the banner. should i use img tag in the html code or should i use css style using the background-image property? which method is best suited under what circumstances?

By "banner" do you mean an advert image?

By "banner" do you mean an advert image?

yes, the big advert images that we see usually on the top of webpages.

Not 100% sure what you mean but regardless - you can add alt text to <img> tags and not bg images. So unless its really a background image I'd probably use a <img>

I only tend to set an image as a background if I need properties like background-size, so I use it mostly for full width header images. It also helps on responsive sites because I can swap the image out within a media query.

 

Other than that, the most semantic way to display images is obviously with the <img> tag, and this is best practice.

yes, the big advert images that we see usually on the top of webpages.

Ok as it's advertising then strictly speaking it's content so an inline image would be applicable...

 

 

<a href="http://www.somesite.com/">
  <img src="banner.png" alt="Advert for ACME">
</a>
 

Background images can be very useful if you put them all in a big sprite. It's not so easy then to swap them out, but if these images are going to be staying for a long time it is well worthwhile. The savings on http requests will really help reduce page load time.

It's really all about semantics:

If the image should be considered as content use the image tag. (The image can be indexed by search engines and have descriptive attributes.)

If the image is a decorative style element or a part of the UI design the CSS background property might be more appropriate.

It's really all about semantics:

If the image should be considered as content use the image tag. (The image can be indexed by search engines and have descriptive attributes.)

If the image is a decorative style element or a part of the UI design the CSS background property might be more appropriate.

I would second this. It really depends on the site as certain aspects might call for a background image rather than a img.

Using img is the best method for creating banner image.

 

<ul>

<li>

<a href="#"><img src="image1.png" alt=""></a>

</li>

<li>

<a href="#"><img src="image2.png" alt=""></a>

</li>

</ul>

It's really all about semantics:

If the image should be considered as content use the image tag. (The image can be indexed by search engines and have descriptive attributes.)

If the image is a decorative style element or a part of the UI design the CSS background property might be more appropriate.

This is the answer I was about to post.

 

It's really all about semantics:

If the image should be considered as content use the image tag. (The image can be indexed by search engines and have descriptive attributes.)

If the image is a decorative style element or a part of the UI design the CSS background property might be more appropriate.

Fully agree. The question of accessibility for those using screen readers needs to be taken into account when deciding whether to use a tag to display the image in the content or specify it as a background in the CSS.

 

If displayed using the <img> tag the image can have alt text attached which screen readers can use to describe the image and its contextual meaning within the page.

 

If specified as a background this alt text cannot be attached and therefore screen readers will have nothing to relay to the user. One way around this is to place the descriptive content into the element to which the image is specified as the background then position the content way off the page using something like:

 

 

Well you'll have to look up a tutorial on putting content off page. This ****ty forum software seems to be ****ed here as well. Don't have any idea how crappy Heart have the cheek to charge for using it. ****ing amateur hour forum software whacked up by a 12 year old from the look of it.

 

 

However doing to much of that could cause the search engines to wonder if some black hat SEO is afoot.

 

If the images are purely of decorative function and have no value as far the content of the page is concerned then they could be placed in an element above the main content and preceded with a 'Skip to main content link' which would be visible only to screen readers. When the link is 'clicked' the screen reader takes the user past the slider and straight to the main content element.

Edited July 20, 201412 yr by nfc212