How create image background with Divs

petes2008

Hi,
Im relatively new to web design so I think this should be a straight forward question for someone out there who works in the field. Im looking to design a site where i have an image background with floating DIVs on top that contain text. An example of what im looking to achieve can be found here :
"http://www.esb.ie/main/home/index.jsp"

Would anyone know what this effect is called so i can investigate further on the net. At the minute i dont even know what to search for? Any info would be great.

tricky D

Download a tool called FireBug for FireFox. It allows you right click on page elements and see both the html and the css for the element.

In this case the div is:

<div id="homepage">
<div id="banner-background">

with the following in the css:

#homepage #banner-background {
background:url("../img/windmill-background.jpg") no-repeat scroll center center #0064A2;
border-bottom:1px solid #666666;
display:block;
height:631px;
padding:0;

More info on css (and xhtml) is at http://www.w3schools.com/css/default.asp or of course, Google 'css background images'.

petes2008

wow, awesome little add-on there, a great help in viewing div details, thanks a lot.

pixelburp

There should really be a sticky thread for add-ons & applications like Firebug (or Developer Tools if you're using IE); it makes debugging markup and stylesheets so easy, and yet many designers appear to have never heard of it.