How to center div and background? HTML/CSS?

Here's my code for the page: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ivoog User Agreement</title> <style type="text/css"> #ivoog {background:url(http://www.pics.ivoog.com/top222.gif) no-repeat; width:100%; height:137px; margin: 15px auto; padding-left: 6px; padding-top: 10px} body{margin: 0 auto; width: 100%} </style> </head> <body> <div id="ivoog"><img src="http://www.pics.ivoog.com/ivoog.gif" alt="" style="width:252px; height:74px"></div> </body> </html> How can I center my div tag and background image and still have the width be 100%?

Public Comments

  1. Your <div> tag is not well qualified and very confusing. Use "position:absolute/relative", set "top:#px", "left:#px". Check details on www.w3schools.com on "div" and "position" You can also use style for div where 'background-image:url("full url");' There are several background types: for div, tables, body etc... You confuse them! Your: body{margin: 0 auto; width: 100%} "width????" Body uses the whole width. To center your division, get the width of the user's screen (another serious bit of code that works differently with all browsers and will NOT work with CSS). Your "div" may become: "<div id='banner' style={position:absolute; left: #px; top: #px; width:".$scrw."px; height:".$bannerh."px; BACKGROUND-IMAGE:url('pics/logo2.jpg');}>"; + other parameters if required. PS: Use CSS if you want to keep consistency between pages on a complex website, otherwise, DEFINE the stuff as you go along. Much less confusing.
Powered by Yahoo! Answers