Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

How create image background with Divs

  • 25-08-2010 03:22PM
    #1
    petes2008
    Registered Users, Registered Users 2 Posts: 48 ✭


    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.


Comments

  • #2
    tricky D
    Closed Accounts Posts: 9,698 ✭✭✭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'.


  • #3
    petes2008
    Registered Users, Registered Users 2 Posts: 48 ✭petes2008


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


  • #4
    pixelburp
    Moderators, Category Moderators, Entertainment Moderators Posts: 36,711 CMod ✭✭✭✭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.


Advertisement