Background image advertisements

[eip56]

Hello everyone,

I believe this might be my first post here. Love the site chris!

Well lets get down to the nitty gritty.

I have always wondered how and what size I need to make background advertisements such as on this website http://www.break.com

If you notice they advertise movies, events, and probably anything they get paid to haha. How can I accomplish this?

Would I just use a specific class or id and div with the background: url(../image/image.gif) type setup. I have tried this but it does resize the image in different browsers, and if I did use this method how would i make it a link. Maybe I’m missing something here and its javascript or something. If someone could provide example code that would be awesome or I’m reall just interested in the steps to accomplish something like this.

Any help and ideas is very much appreciated.

[Rob MacKay]

Firstly – there are standard sizes for adverts on websites.

http://www.iab.net/iab_products_and_ind … /1443/1452

Ok now thats out of the way, there are a number of ways you can do it. I would say the most usable way is to not set the image as a background, and then you can add an alt tag to the image as well…

In this case there are a few ways – you could simply wrap an link around the image – with the CSS like…

a.advert {
display:block;
width:125px;
height:125px;
float:left;
margin:10px;
border: #ccc 3px solid;
}

<a href="#"><img /></a>

this would change the a tag from inline to block, you could then put a 125px image inside the tag.

If you want something more traditional – you could wrap each one in a DIV – so something like

<div>
<a href="#"><img /></a>
</div>

or you could make a list:

<ul>
<li> <a href="#"><img /></a></li>
<li> <a href="#"><img /></a></li>
<li> <a href="#"><img /></a></li>
<li> <a href="#"><img /></a></li>
</ul>

if you style the list right – you could have the li’s floating left doubling them up if you wanted to…

The deal is as long as you stay within the rules – you wont have a problem – its your choice.

[Author]

Posts