Problema da principiante: Background "copre" header....

[giuliet87]

Ciao a tutti! Sono vagamente ignorante in materia, ma mi sto lnciando nella modifica di un template per wordpress, giusto per imparare qualcosa...Vi espongo il mio problema...
Utilizzo un tema in cui originariamente il background non era un'immagine, e l'immagine che si presentava nella sezione body funzionava come header...

body { font:11px/18px "Lucida Grande", "Segoe UI", Arial, Verdana; color:#a6a6a6; background:#111 url(images/uu.jpg) no-repeat center ; }

Io vorrei mettere un'immagine come background, e un'altra immagine come header, che per voi è una cosa facilissima ma per me evidentemente no
Ho modificato in "body" inserendo l'immagine di background in questo modo:

body { font:11px/18px "Lucida Grande", "Segoe UI", Arial, Verdana; color:#a6a6a6; background:#111 url(images/wood.jpg) repeat center ; }

ed effettivamente è apparsa l'immagine che volevo, il problema è che copre totalmente l'immagine "header" che ho inserito ignorantemente qui:

/*/////////////////////////////////////////
//////////// LAYOUT STRUCTURE /////////////
/////////////////////////////////////////*/
#container { width:894px; padding:0; margin:24px; margin-left:202px; margin-right:202px; overflow:auto; }
#content { width:482px; float:left; padding:80px 6px 15px 6px; background:#1a1a1a url(images/title.png) no-repeat; }
#header { margin:0; padding:0; margin-top:190px; background:#111 url(images/header.jpg) }
#logo h1 { font:26px arial; margin:0; padding:0;}
#logo h1 a { width:240px;height:100px;float:left;margin-top:10px;text-indent:-999em; }


Potete mica aiutarmi?

[Myaku]

per darti una risposta precisa dovremmo vedere il codice completo, dovresti quindi postare il link alla pagina.

Comunque, intanto verifica quanto segue:
. se non vi sono contenuti testuali in #header, definisci anche una height.
In questo caso, infatti, non è l'immagine di sfondo al body che copre l'header, ma l'header che, non avendo nulla al suo interno che "allunghi" l'elemento, non ha altezza.

[giuliet87]

Originariamente inviato da Myaku
per darti una risposta precisa dovremmo vedere il codice completo, dovresti quindi postare il link alla pagina.

Comunque, intanto verifica quanto segue:
. se non vi sono contenuti testuali in #header, definisci anche una height.
In questo caso, infatti, non è l'immagine di sfondo al body che copre l'header, ma l'header che, non avendo nulla al suo interno che "allunghi" l'elemento, non ha altezza.

Aluuuua...questo è l'indirizzo http://kinyota.altervista.org/wordpress/
e se vuoi ti posto direttamente il file css...

/*
Theme Name: vikiworks V5.0 beta 4
Theme URI: http://vikiworks.com
Version: 5.0beta 4
Author: yichi
Author URI: http://vikiworks.com

*/


/*/////////////////////////////////////////
///////////////// OVERAL ////////////////
/////////////////////////////////////////*/
body { font:11px/18px "Lucida Grande", "Segoe UI", Arial, Verdana; color:#a6a6a6; background:#111 repeat center ; }
a { color:#666;text-decoration:none;outline:0; }
a:hover { color:#eee; }
::-moz-selection { background:#662704;color:#eee; } /* FF */
::selection { background:#b02a00;color:#eee; } /* safari */
ul { list-style:none; margin:0; padding:0; }
ol { list-style:decimal-leading-zero; }
ul.dates, ul.counts { list-style-type:none;margin:3px 0; }
ul.dates li, ul.counts li { list-style-type:none; margin:0;padding:3px 0 3px 10px;background:url(images/li.gif) no-repeat center left; }
ul.dates .date { color:#333;padding:0 5px 0 0;text-transform:uppercase;font:9px arial; }
ul.counts .count { float:right;color:#858585; }
ul.dates a, ul.counts a { color:#BFBFBF;text-decoration:none; }
ul.dates a:hover, ul.dates a:hover .date, ul.counts a:hover, ul.counts a:hover .count { color:#ddd; }
.clear { clear:both; }
.left { float:left; margin-right:8px; }
.right { float:right;margin-left:8px; }
.pagetitle { margin:0; padding:6px 5px 20px 20px; font:bold 10px arial,verdana;color:#ccc;text-transform:uppercase;background:url(images/exclamation.png) no-repeat 0 15%; }
h3 { margin:0; padding:0;font:bold 11px Arial; text-transform:uppercase; color:#eee; }
h4 { margin:0; padding:0;font:bold 11px Arial; text-transform:uppercase; color:#942f25;letter-spacing:1px; }
code { font: 11px arial, "Courier New"; color:#666; padding:12px 10px;display:block; }
code::-moz-selection { background: #333; }
code::selection { background: #333; }
blockquote { color:#666; padding-top:5px; padding-bottom:5px; background: url(images/close-quote.png) no-repeat right bottom; font-weight:bold; }
blockquote p { padding-left: 10px; text-indent: -18px; }
blockquote p:first-letter { background: url(images/open-quote.png) no-repeat left top; padding-left: 18px; padding-top: 8px; }
blockquote p ~ p:first-letter { font-size:12px; background: none; }
.pullquote { padding: 6px; float: right; width: 180px; margin:5px 0 10px 10px; border-top:1px solid #222; border-bottom:1px solid #222; text-align: center; font-family: verdana, Arial, Helvetica, sans-serif;color:#aaa;font-size:11px; }


/*/////////////////////////////////////////
//////////// LAYOUT STRUCTURE /////////////
/////////////////////////////////////////*/
#container { width:894px; padding:0; margin:24px; margin-left:202px; margin-right:202px; overflow:auto; }
#content { width:482px; float:left; padding:80px 6px 15px 6px; background:#1a1a1a url(images/title.png) no-repeat; }
#header { height:123px;margin:0; padding:0; margin-top:190px; background:#111 url(images/ancillary.jpg) }
#logo h1 { font:26px arial; margin:0; padding:0;}
#logo h1 a { width:240px;height:100px;float:left;margin-top:10px;text-indent:-999em; }


/*/////////////////////////////////////////
///////////////// FLASH ANIMATION DIV ////////////////
/////////////////////////////////////////*/
#flash {margin:0;padding:0; width:820px; }

/*/////////////////////////////////////////
//////////// SLIDER /////////////
/////////////////////////////////////////*/
#a { width:975px;height:200px;margin:0;padding:0;backgr ound:#111 url(images/extras-bg.jpg) no-repeat; border-bottom:1px solid #333;border-right:1px solid #333; }
#a ul { margin:0;padding:0; }
#b { height:160px;margin:0;padding:0;background:#252525 ;border-top:1px solid #303030;border-bottom:1px solid #2f2f2f; }
#b ul { margin:0;padding:0; }

#handler { width:975px;margin:0;padding:0; height:20px; }
#handle ul { margin:0;padding:0; }

ul#menu { clear:both;float:right;margin:70px 10px 0 5px;padding:0; }
ul#menu li#close a { background:transparent url(images/handler.png) no-repeat left bottom; text-indent:-999em;width:50px; height:20px; display:block; padding:0; margin:0; }

#openB { float:right; margin:5px 20px 0 0;font-size:90%; }
#closeB { float:right; margin:5px 20px 0 0;font-size:90%; }

.expand a { text-indent:-999em;background:transparent url(images/handler.png) no-repeat left top;display: block;float:right;width: 36px;height: 20px;padding:0;margin:0 140px 0 0; }


/*/////////////////////////////////////////
//////////// TOP NAVIGATION, MENU /////////////
/////////////////////////////////////////*/
.menu { margin:0;padding:0;height:32px;background:#040404 url(images/menu.png);font-size:11px;}
.menu ul { margin:0;padding:0;margin-left:20px;list-style:none; }
.menu li { margin:0;padding-top:3px;float:right; }
.menu li a { color:#ddd;text-decoration:none;padding-left:0px;display:block;margin-right:12px;padding:4px 10px 3px 8px;border-bottom:0px; }
.menu ul li a:hover{ color:#eee;background:#333; }
.menu ul li a.active{ color:#fff;padding-left:18px; }


/*/////////////////////////////////////////
///////////////// RELATED POSTS ////////////////
/////////////////////////////////////////*/
.relposts { margin:0; padding:0; color:#333;}
.relposts h2 { margin:0; font:bold 11px Arial; text-transform:uppercase; color:#9d8a77; }
.relposts li { margin:0; padding:2px 0; background:url(images/left-fodler.gif) no-repeat 0 50%; }
.relposts li a { color:#666; text-decoration:none; border-bottom:1px dotted #222; }
.relposts li a:hover { color:#ccc; border-bottom:1px solid #942f25; }


/*/////////////////////////////////////////
///////////////// POSTS & CONTENTS ////////////////
/////////////////////////////////////////*/
#content .post { margin:0; margin-bottom:15px; padding: 5px 6px 20px 4px; background:url(images/divider.png) repeat-x bottom; }
#content .post:hover { background:#151515 url(images/back_on.png) repeat-x top; }
#content .post h2 { font:16px "Lucida Grande", Geneva, Arial, verdana; letter-spacing:-1px; margin:0;padding:0; }
#content .post h2 a { color:#bf4d08; text-decoration:none;margin:0;padding:0;display:inline; }
#content .post h2 a:hover { color:#fff; border-bottom:2px solid #bf4d08; }

#content .post small { font-size:80%; font-family:arial; text-transform:uppercase; letter-spacing:normal; display:block; }
#content .post small a { color:#eee;text-decoration:none;}
#content .post small a:hover { color:#999; }
#content .post-comments { background: url(images/icon-comment.gif) no-repeat 0 50%; padding-left: 13px; margin:0; }

#content .entry ul li { margin:0; color:#bbb;padding:0 0px 0 12px;list-type:none; }
#content .entry ol { list-style:decimal-leading-zero; }
#content .entry a { /* modify a color of body content module */
text-decoration:underline;color:#555; }
#content .entry a:hover { color:#ddd;background:#333;text-decoration:none; }
#content .entry img { border:1px solid #222; } /* body images styles - with 1px border hover effect */
#content .entry img:hover { border:1px solid #777; }
#content .entry img.wp-smiley { border:0px none; margin:0; vertical-align:middle; } /* Smiley */




/* HEADER & RSS FLAG */
#randomshit {width:400px; height:28px;background:url(images/randomshit.png) no-repeat;}
#randomshit a {color:#eee;}
#randomshit a:hover {color:#fc0;}


/*/////////////////////////////////////////
///////////////// SIM TAGS ////////////////
/////////////////////////////////////////*/
#simtag { margin:5px; padding:10px 8px 40px 10px; background:transparent url(images/tagclouds.png) no-repeat right bottom; }
#simtag a:link, a:visited { text-decoration:none;}
#simtag a:hover { text-decoration:underline; }

#simtag2 { margin:0; padding:10px 0 35px 0; background:transparent url(images/tagclouds.png) no-repeat right bottom; }
#simtag2 a:link, a:visited { text-decoration:none;color:#f40; }
#simtag2 a:hover { text-decoration:underline; }

/*/////////////////////////////////////////
///////////////// RECENT ////////////////
/////////////////////////////////////////*/
#BOX { margin:20px 10px; padding:5px;}
#BOX a.hightlighted, #BOX a.hightlighted_down { background:#151515;font:10px arial; text-transform:uppercase;padding:4px;padding-left:6px;padding-right:6px;text-decoration:none; color:#999; }
#BOX a.hightlighted:hover { background:#333; }
#BOX a.hightlighted_down { background:#662704;color:#ddd; }

#recent { margin:0; padding:0; }
#recent h2 { margin:0; text-transform:uppercase; color:#333 }
#recent UL { padding: 5px 0;margin: 0; list-style-type: none; }
#recent li a { color:#666;text-decoration:none; }
#recent li a:hover { color: #942f25; }

#sidecomments { margin:5px 0;padding:0;width:300px; }
#sidecomments UL, li { padding: 0px;margin: 0; list-style: none; }
#sidecomments li a { color:#666;text-decoration:none; }
#sidecomments li a:hover { color: #942f25; }

#monthly { padding:0;margin:0; }
#monthly ul, li { padding: 3px 0; list-style: none; }
#monthly li a { color:#666;text-decoration:none; }
#monthly li a:hover { color: #942f25; }




/*/////////////////////////////////////////
///////////////// CATEGORIES ////////////////
/////////////////////////////////////////*/
.cat { height:85px; background: url(images/cat.png) no-repeat right bottom; padding:10px 0 10px 10px; }
.cat ul { margin:4px 0; }
.cat ul li { list-style:none;padding:4px 0px; display:inline; }
.cat ul li a:link, .cat ul li a:visited { color:#999;float:left;text-transform:uppercase; width:35%;padding:2px;font-size:10px; margin:0px 3px; }
.cat ul li a:hover { color:#fff; background:#662704 url(images/cat-sign.gif) no-repeat 95% 50%; }


/*/////////////////////////////////////////
///////////////// FEATURED ////////////////
/////////////////////////////////////////*/
#featured { height:230px;margin:0;padding:0;background:#080808 ; }
.controls { padding:4px 2px 1px 2px; }
.controls a { background:#181818;border:1px solid #181818;display:block;float: left; height: 25px;width: 25px;margin-left:2px;margin-right:8px;padding: 2px; }
.controls b { background-color: #fff;display:block;height: 25px;overflow:hidden;text-indent: -999em;width: 25px; }
.controls a.on { border: 1px solid #999; }
.controls a:focus { outline:none;border-color:#999; }
.boxIn { clear: both;border: 1px solid #efefef;padding: 0 10px 10px; }
.pi { padding: 5px 0;width:400px; }
.mi { color:#999;background: url(images/mask.png) no-repeat;padding: 4px;font:10px "Lucida Grande", arial;margin: 135px 10px 10px;width: 172px; }
.mi a { color: #999;text-decoration:none; }
.mi a:hover { color:#ddd; }

div.scroller { /* modify width and height of scrolling section if necessary */
width: 400px; height: 190px;overflow: hidden;}
div.scroller div.section {/* modify width and height of each section as needed (should match the size of the scroller window) */
width: 400px;height:190px;overflow:hidden;float:left; }
div.scroller div.content { width: 10000px; }
.section {color:#fff;}





Sei davvero gentile, grazie mille!!

[Myaku]

dovrebbe essere sbagliato il percorso all'immagine (mi da "file not found"). Sostituiscilo con l'assoluto (http://www....../.....jpg), su alcuni cms usare percorsi relativi può dare problemi.

ps. la prossima volta che posti del codice qui sul forum, usa il pulsante #