For some reason, the author has the logo div nested inside the header div and yet, the gif image is part of the header. Anyway, I want the gif to be centered with that dark blue background behind it, expanding on both sides to the width of the viewport. How do I do this? Blog is bigtalkandgunsmoke.com/ header.php file <?php include("pagefunctions.php"); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title> <?php bloginfo('name'); ?> <?php wp_title(); ?> </title> <meta name="distribution" content="global" /> <meta name="robots" content="follow, all" /> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php //comments_popup_script(); // off by default ?> <?php if (is_single() and ('open' == $post-> comment_status) or ('comment' == $post-> comment_type) ) { ?> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js.php"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/effects.js.php"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/ajax_comments.js"></script> <?php } ?> <?php if (is_page() and ('open' == $post-> comment_status)) { ?> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js.php"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/effects.js.php"></script> <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/ajax_comments.js"></script> <?php } ?> <style type="text/css" media="screen"> <!-- @import url( <?php bloginfo('stylesheet_url'); ?> ); --> </style> <?php global $page_sort; if(get_settings('spotlight_sortpages')!='') { $page_sort = 'sort_column='. get_settings('spotlight_sortpages'); } global $pages_to_exclude; if(get_settings('spotlight_excludepages')!='') { $pages_to_exclude = 'exclude='. get_settings('spotlight_excludepages'); } ?> <?php wp_head(); ?> </head> <body id="home" class="log"> <div id="header"> <div id="logo"> <h1 id="blogname"><a href="<?php bloginfo('siteurl'); ?>"> <?php bloginfo('name'); ?> </a></h1> <div class="description"> <?php bloginfo('description'); ?> </div> </div> <div> <ul id="navigation"> <?php if (is_home()) {$pg_li .="current_page_item";} ?> <li class="<?php echo $pg_li; ?>"><a href="<?php bloginfo('siteurl'); ?>" title="Home"><span>Home</span></a></li> <?php wp_list_page('title_li=&depth=1&'.$page_sort.'&'.$pages_to_exclude)?> </ul> </div> </div> <div id="wrap"> Code (markup): CSS Stylesheet /* Theme Name: SpotLight Description: Light theme created by <a href="http://vaguedream.com" target="_blank">Stephen Reinhardt</a> Modified by <a href="http://themecorp.com/themes/spotlight/" title="SpotLight" target="_blank">Sadish Bala</a>. Version: 1.3 Author: Sadish Bala Author URI: http://themecorp.com */ * { margin:0; padding:0; } body { background-color:#fff; color:#333; font-family: Verdana,'Trebuchet MS','Lucida Grande', Arial, sans-serif; font-size:small; margin:0; padding:0; font-size:0.76em; } p { line-height:1.8em; margin:0.5em 0; } a:link, a:visited { color:#459045; text-decoration:none; border-bottom:none; } a:hover, a:active { text-decoration:none; border-bottom: 1px solid; } fieldset { border:none; } code { background-color:#eee; border:1px solid #ccc; padding:5px; } h1,h2,h3,h4,h5,h6 { font-family:Georgia, Tahoma, Arial, Serif; font-weight:normal; line-height:1.6em; } h2, h3 { font-size:1.6em; margin:10px 0; } h4 { font-size:1.3em; } ul { list-style-image:url(images/arrow.gif); margin:5px 10px; padding:1em; } li { line-height:1.6em; margin-bottom:0.5em; } img { background:url(images/shadow.gif) no-repeat right bottom; padding:4px 10px 10px 4px; border:none; border-top:#eee 1px solid; border-left:#eee 1px solid; } a img { border:none; background:none; padding:none; background:url(images/shadow.gif) no-repeat right bottom; padding:4px 10px 10px 4px; border-top:#eee 1px solid; border-left:#eee 1px solid; } img.wp-smiley { border:none; padding:0; background:none; } img.right { float: right; margin:10px 0 0 10px; } img.left { float: left; margin:0 10px 10px 0; } #wrap { overflow:hidden; padding-left:10px; padding-right:10px; position:relative; width:900px; margin:0 auto; } #header { background:url(images/top.gif) top no-repeat; background-position:center; height:200px; margin:0; padding:0; width:100%; text-align:center; z-index:2; } #logo { background:#12151d; height:200px; width:100px; margin:0 auto; z-index:1; } #blogname { height:30px; padding-left:12px; padding-top:28px; text-align:left; } h1#blogname a { color:#fff; font-size:1.3em; } .description { color:#CAE972; font-size:1em; font-style:italic; padding-left:12px; text-align:left; margin:5px 0 0; } #content { display:inline; float:left; text-align:left; width:65%; margin:2%; padding:0; } #sidebar { display:inline; float:right; padding-top:5px; width:25%; margin:5px 0px 20px 0; padding-left:20px; border-left:#ddd 1px dashed; font-size:90%; } #sidebar ul#feed li { list-style:none; margin:0; padding:5px 20px; background:url(images/feed-icon.png) no-repeat left ; } #sidebar h2 { border-bottom:#eed 3px double; font-size:18px; color:#459045; letter-spacing:0; margin:0; padding:5px 0; } #sidebar p { margin:10px 0; } #sidebar ul, #sidebar form { margin:2px 0; padding:5px 10px; } #sidebar ul ul ul { margin:2px 0; padding:0 0 0 10px; } #sidebar li.sidebox { margin:0 0 2em 0; padding:0; } #sidebar li{ margin:3px 0; line-height:1.8em; list-style:none; } #sidebar ul li a { color:#516F86; } #footer { background:#223344 url(images/top.gif) bottom repeat-x; clear:both; height:60px; padding:10px; text-align:center; margin:0 auto; color:#ccc; } ol#commentlist { list-style:none; margin:5px 0; padding:0; } .commentname { color:#4b5ba2; } .commentname a { color:#333; font:bold 110% "Trebuchet MS", "Lucida Grande", verdana, helvetica, arial, sans-serif; text-decoration:underline; } .commenttext { margin:5px 0 0 0; background:#ffe; border-left:#ccc 3px double; } .alt .commenttext { background:#f0f0ee; border-left:#ccc 3px double; } * html .commenttext { height:90px; overflow:visible; } input.textbox { border:#ccc 1px solid; background:#fff url(images/postbg.jpg) repeat-y top left; font:1em Verdana, Arial, Serif; padding:2px 5px; width:150px; } textarea{ width: 90%; padding:5px; height: 20em; border: 1px solid #ccc; background:#fff url(images/postbg.jpg) repeat-y top left; font:1em Verdana, Arial, Serif; } input.textbox:focus, textarea:focus { border:#999 1px solid; } .commentp { padding:20px 12px 10px 10px; } .commenttext p { margin:0 0 10px; padding:0; } #commentblock ol li { margin-bottom:30px; } #commentblock { margin-left:4px; } .gravatar { background:url(images/grav.png) no-repeat; display:inline; float:left; height:32px; width:32px; margin:20px 0 0 10px; padding:8px; } #commentsform p { margin-bottom:5px; margin-top:5px; } h3.entrytitle,h3 { color:#1e2546; display:block; font-size:1.5em; margin:0; } h3 a:link,h3 a:visited,h3 a:hover,h3 a:active { color:#1e2546; } .entry { margin:10px 0; padding:15px 0; border-bottom:#eed 3px double; } .entrybody { margin:1em 0; padding:0; } .entrybody a:link,.entrybody a:visited { border-bottom:1px dashed; } .entrybody a:active,.entrybody a:hover { border-bottom:1px solid; } .entrymeta { color:#999; margin:0; padding:0; font-size:90%; } .entrymeta .comments { background:url(images/comments.gif) no-repeat left center; padding-left:15px; } h2.archives { background-color:#FFC; color:#999; font-style:italic; margin-bottom:25px; text-align:center; } .entrymeta-single { color:#333; margin-bottom:20px; margin-top:3px; } .entrybody ul,.entrybody ol { margin:10px 0 10px 30px; } .entry li { line-height:1.6em; } table { margin:10px; } td,th { padding:3px; } blockquote { color:#666; margin: 1em; padding: 0 0 10px 50px; background: url(images/blockquote.gif) no-repeat left top; } #navigation { clear:both; height:24px; margin:0 auto; padding:0 10px; text-align:center; width:880px; font-size:1.1em; } #navigation a:link, #navigation a:visited { background:#FFF url(images/active1.gif) left bottom no-repeat; color:#787878; height:24px; margin-right:2px; padding-left:12px; text-decoration:none; border:none; } #navigation a:link, #navigation a:link span, #navigation a:visited, #navigation a:visited span { cursor:hand; display:block; float:left; border:none; } #navigation li { line-height:23px; float:left; list-style:none; margin:0; } #navigation a:hover { background:url(images/active1.gif) left bottom no-repeat; color:#040; height:24px; padding-left:12px; text-decoration:none; border:none; } #navigation .current_page_item a:link, #navigation .current_page_item a:visited { background:#FFF url(images/current1.gif) left bottom no-repeat; color:#AAC8E0; height:27px; line-height:24px; margin-right:2px; padding-left:15px; text-decoration:none; border:none; } #navigation .current_page_item a:hover { background:#FFF url(images/current1.gif) left bottom no-repeat; color:#AAC8E0; height:27px; margin-right:2px; padding-left:15px; text-decoration:none; border:none; } #navigation ul { list-style:none; margin:0; padding:0; } h3,#commentblock h2 { font-size:140%; } #navigation a:link span, #navigation a:visited span, #navigation a:hover span { background:url(images/active2.gif) right bottom no-repeat; height:24px; padding-right:12px; border:none; } #navigation .current_page_item a:link span, #navigation .current_page_item a:visited span, #navigation .current_page_item a:hover span { background:url(images/current2.gif) right bottom no-repeat; height:27px; padding-right:15px; border:none; } Code (markup):
Hi Shadowplay, If I understand what you want to do correctly, you will want to change the css from 100px to 100%: #logo { background:#12151d; height:200px; width: 100px; margin:0 auto; z-index:1; } to #logo { background:#12151d; height:200px; width: 100%; margin:0 auto; z-index:1; } If you also want the title and description centered, change these to items in the CSS to center: #blogname { text-align:center; .description { text-align:center;
Okay, I changed it but the logo is covering up the header where top.gif is. I thought changing the z-index would reverse this but it seems to have no effect. How do I make the image appear on top of the dark, blue background?
The images are not on the page. I got this message when I checked your image references in the CSS: 404 Not Found The requested URL /images/top.gif was not found on this server. Your footer image is gone too. It looks like your images were moved from spotlight-13/images/top.gif to spotlight-13/spotlight-13/images/top.gif. Either move the images folder up one level, or change the image callouts in the CSS to be spotlight-13/images/top.gif I hope this helps. Cheers, Robert
I reinstalled the theme. The image, as you can see needs to be centered. I do not know how to do this with a background image. Does text-align:center not work? Also, I want the same blue background as the footer to the left and right of the image with the 3 men. How do I achieve this?
Text-align:center only works on text. To get what you want, rename your 3 men image to logo.gif, put the original top.gif back into the images folder. In header.php after the line <div id="logo">, insert <div class="header_logo"> In style.css, replace the #header and # logo with: #header { background:url(images/top.gif) top repeat-x; height:145px; margin:0; padding:0; width:100%; } .header_logo { background: url(images/logo.gif) no-repeat top center;; position: center; height: 100px; width: 900px; } #logo { height:100px; width:900px; margin:0 auto; } This will center your 3 men logo and retain the blue header bar.