Bild über skaliertes Hintergrundbild in Header...?

sojos

Hallo,

ich bin neu hier und hoffe eine Antwort auf meine Frage zu finden. Ich habe ein Theme, welches einen Hintergrund verwendet, der über die gesamte Breite aufgezogen ist. Nun möchte ich im Kopfbereich ein Bild über den Hintergrund legen, bekomme es aber nicht hin. Anbei der Quellcode:

style.css:

CSS

/* 
Theme Name: ZyRed Theme
Theme URI: http://www.zyblog.de/wordpress-themes/zyred/
Description: ZyRed is a three column WordPress theme with flexible width. The content column has a minimum width of 468 pixel, making the theme well prepared for ad placement.
Version: 3.0.1
Author: Tim Zylinski
Author URI: http://www.zyblog.de/
License:  GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: red, white, light, three-columns, flexible-width, translation-ready
*/




/*** General Element Styling ***/


body{margin:0;padding:0;background:#8B8B8B;color:#303030;font:11px Arial, Verdana, sans-serif;text-align:center;}
a{color:#505050;font-weight:normal;text-decoration:none;}
a:hover{color:gray;text-decoration:underline;}
a[href^="http:"]{text-decoration:underline;}
p{margin:0 0 15px;padding:0;line-height:1.5em;}
blockquote{border:1px dashed #B0B0B0;padding:10px;margin:30px;}
blockquote p{padding:0;margin:0;}
code{white-space:pre;color:#000;font-size:1.1em;text-align:left;}
pre{border:1px solid #B0B0B0;padding:10px;width:90%;background:#F8F9FA;font-family:monospace;-moz-background-clip:0;-moz-background-inline-policy:0;-moz-background-origin:0;overflow-x:auto;overflow-y:auto;padding-left-ltr-source:physical;padding-left-rtl-source:physical;padding-right-ltr-source:physical;padding-right-rtl-source:physical;-x-background-x-position:0;-x-background-y-position:0;}


[B]/*** Main container ***/
#container{margin:0;padding:0;width:100%;color:#303030;background:url(images/bodybg.png) #F0F0F0 repeat-x;text-align:left;min-width:770px;}[/B]


/*** Header section ***/
#sitename{margin:0 20px 10px;color:#FFF;text-align:center;height:90px;}
#sitename h1,#sitename h2{margin:0;padding:0;font-weight:400;}
#sitename h1{padding-top:20px;font-size:2.4em;}
#sitename h1 a{color:#FFF;text-decoration:none;letter-spacing:5px;}
#sitename h2{font-size:1.6em;}




/*** Content wrap ***/
#wrap{clear:both;padding:0;margin:10px auto;font-size:1em;max-width:80%;min-width:910px;}
* html div#wrap{width:80%;width:expression(document.body.clientWidth < 990 ? "910px" : document.body.clientWidth > 990 ? "80%" : "auto");}


/*** Horizontal menu ***/


/** 1st level **/
#mainmenu{background:url(images/menubg.png) #f0f0f0 center left repeat-x;border-bottom:1px solid #fff;border-top:1px solid #fff;clear:both;height:30px;margin:0 auto;padding:0;}
#mainmenu ul{margin:0 auto;padding:0;width:1050px;}
#mainmenu ul li{border-right:1px solid #B0B0B0;float:left;list-style:none;padding:0;position:relative;text-transform:uppercase;}
#mainmenu ul li a{color:#940C0E;line-height:30px;margin:0;padding:9px;text-decoration:none;width:auto;}




/*** Page ***/
#page{border-bottom:none;padding-bottom:10px;margin-bottom:10px;}


/*** Content ***/
#content{color:#2A2A2A;background:#FFF;min-width:468px;border:none;line-height:1.2;margin:0 190px;padding:15px 20px 5px;}
#contentalt{margin:0 200px 0 20px;}
#content h1{color:#606060;background:inherit;font-size:1.8em;font-weight:bold;letter-spacing:-1px;border-bottom:1px solid #B0B0B0;margin:0 0 15px;padding:0;}
#content h2{color:#606060;font-size:1.8em;}
#content h1,#content h2{margin-top:5px;font-weight:normal;font-size:1.8em;}
#content h1.pagetitle{border-bottom:1px solid #B0B0B0;font-size:1.8em;margin:0 -20px;padding:0 20px;}
#content h2 a,.category a,.date a{text-decoration:none;}
#content .sticky{background:#f2f7fc;margin:-10px;padding:10px;}
.entry,.entrytext{overflow:hidden;}
* html.entry,* html.entrytext{overflow:visible;height:1px;}
* html.entry p,* html.entrytext p{width:99%;overflow:hidden;}
.entrytext{padding-top:0;}
.entry img,.entrytext img{border:none;}
.entry a:hover img,.entrytext a:hover img{border:none;}
.entry p a{text-decoration:underline;}


/*** Footer ***/
#footer{clear:both;margin:0;width:100%;background:url(images/footerbg.png) #8B8B8B top left repeat-x;color:#000;font-size:.9em;line-height:30px;height:30px;text-align:center;}
#footer a{color:#000;font-weight:normal;}


/*** Text format ***/
.intro{font-size:1.1em;font-weight:bold;letter-spacing:-1px;}
.small{font-size:.8em;}
.large{font-size:1.4em;}
.center{text-align:center;}
.category{border-bottom:1px solid #B0B0B0;margin:0 -20px;padding:0 20px 20px;}
.date{margin-top:-10px;padding-top:0;border-bottom:1px solid #B0B0B0;border-bottom-width:medium;border-bottom-style:none;border-bottom-color:0;margin-top:-15px;}


/*** Image Display ***/
.entry img,.entrytext img{border:1px solid #B0B0B0;margin:5px;padding:5px;}
.entry a:hover img,.entrytext a:hover img{border:1px solid #505050;padding:5px;}
img.wp-smiley{border:0;margin:0;padding:0;}
.thumbnail{border:1px solid #B0B0B0;margin:0 0 10px 10px;padding:5px;background:#FAFBFC;}
.left{border:1px solid #B0B0B0;float:left;margin:5px 15px 6px 0;padding:5px;background:#FAFBFC;}
.right{border:1px solid #B0B0B0;float:right;margin:5px 0 6px 15px;padding:5px;background:#FAFBFC;}
.noalign{border:1px solid #B0B0B0;margin:5px;padding:5px;background:#FAFBFC;}
.wp-caption{background:#f1f1f1;line-height:18px;margin-bottom:20px;max-width:632px!important;padding:4px;text-align:center;}
.wp-caption img{margin:5px 5px 0;}
.wp-caption p.wp-caption-text{color:#888;margin:5px;}
.gallery-caption{color:#888;margin:0 0 12px;}


.alt{background:#F0F0F0;}
.gravatarside{float:left;width:48px;height:48px;margin:0 5px 0 0;padding:3px;border:1px solid #000;}
p.commentmetadata a,p.commentauthor a{text-decoration:none;font-size:1em;line-height:1em;}
.commentlist {margin: 20px 0 0 0}
.commentlist > li{border:1px solid #B0B0B0;padding:10px;margin:0 0 10px 0;list-style:none;}
.commentlist > li cite{text-transform:capitalize;}
.commentlist > li p{padding-top:10px;}
.commentlist > li p a{text-decoration:underline;}
.commentlist ul.children li.comment  {list-style:none;}
.bypostauthor  {}


/*** Comment navigation ***/
h3#comments {font-size:130%;margin-top:30px}
.comment-nav-above,.comment-nav-below {padding-bottom:10px}
.nav-previous{float:left;width:50%;}
.nav-next{float:right;text-align:right;width:50%;}


/*** Widgets ***/


/*** Sidebars & Widgets ***/
#rightnav,#leftnav{margin:0;padding:0;width:180px;}


.leftside{float:left;margin:0 10px 0 0;}
.rightside{float:right;margin:0 0 0 10px;}


.widget{clear:both;color:#000;margin-bottom:10px;font-size:.9em}


.widget-area {list-style:none}
.widget-area  ul{padding-left:0;margin:0;padding-bottom:5px;margin-bottom:10px;}
.widget-area  li{list-style:none;}
.widget-area ul li{border:none;font-family:Verdana, Arial, sans-serif;}
.widget-area.leftside  ul li{background:#BAD6BD;}
.widget-area.rightside ul li{background:#DCDCDC;}


.widget-title{background:url(images/headerbg.png) #940c0e top left repeat-x;border-bottom:1px solid #BEBFC3;color:#FFF;font-size:1.2em;margin:0;padding:5px 10px;}


.widget ul{margin:0;}
.widget ul li,.widget-container ul li{background:red;color:#505050;}
.widget ul ul{margin-left:1.5em;}


.widget a{color:#000;font-weight:none;text-decoration:none;}
.widget a:hover,.widget a:focus,.widget a:active{background:#940C0E;color:#FFF;text-decoration:none;}


/* Adjusting the inner padding for all widget types */
.widget > ul,.widget-container > ul,.widget > div.textwidget,.widget > div#calendar_wrap,.widget > .tagcloud{padding:10px;}


/* remove the spacing in hierarchical widget items */
.widget_pages ul.children , .widget_categories ul.children{padding:0}


/* Make Links in text widget and recent comments visible */
.textwidget a, .widget_recent_comments  a{text-decoration:none;color:#940C0E}


/* Widget Image */
.widget_image img{height:auto;max-width:100%;}




/* ZyRed RSS Widget */
li#zyred-rss ul li.feed {padding:3px 0 3px 20px;background:url(images/rss.gif) no-repeat left top;font-weight:normal;}
li#zyred-rss ul li.feed a,li#zyred-rss ul li.feed a:hover{color:#000;font-weight:normal;text-decoration:none;}


/*** End of file ***/

Alles anzeigen

Header:

PHP

<html <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title( '|', true, 'right' ); bloginfo( 'name' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?3.4.1/build/cssfonts/cssfonts-min.css&amp;3.4.1/build/cssreset/cssreset-min.css&amp;3.4.1/build/cssbase/cssbase-min.css" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />


<?php
/* We add some JavaScript to pages with the comment form
 * to support sites with threaded comments (when in use).
 */
if ( is_singular() && get_option( 'thread_comments' ) )
    wp_enqueue_script( 'comment-reply' );


wp_head(); 
?>
</head>


<body <?php body_class(); ?>>
<div id="container">
    <div id="sitename">
        <h1><a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
        <h2><?php esc_attr( bloginfo('description')); ?></h2>
    </div>
    
    <?php wp_nav_menu( array( 'theme_location' => 'primary', 'container_id' => 'mainmenu', 'menu_class' => 'level1' ) ); ?>


    <div id="wrap">

Alles anzeigen

Ich mußte ein bisschen Code entfernen (Widget, Comments...), da der Thread sonst zu lang gewesen wäre.
Hoffe, die beiden Codes reichen für Hilfe

Danke

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

maxe

du kannst doch dem #sitename z.B. noch einen Background-Image geben.
Oder du fügst einfach über ein img-Tag ein Bild in die header.php ein.
Je nach dem was genau du willst.

sojos

AW: Bild über skaliertes Hintergrundbild in Header...?

wenn ich ein img-tag in die header.php schreiben will, wo gehört die hin? es soll eigentlich nur ein kleines Logo eingefügt werden.

maxe

AW: Bild über skaliertes Hintergrundbild in Header...?

Na dahin wo es erscheinen soll ;-)

sojos

Hab es mit der style.css versucht. Jedoch legt es mir die Titelzeile genau auf Anfang des Images. Hier der Code:

Code

/*** Header section ***/
[B]#sitename {background:url(images/logo.png) no-repeat;position:relative; top:5px; left:100px;}[/B]
#sitename{margin:0 20px 10px;color:#FFF;position:text-align:center;height: 90px;}


#sitename h1,#sitename h2{margin:0;padding:0;font-weight:400;}
#sitename h1{padding-top:20px;font-size:2.4em;}
#sitename h1 a{color:#FFF;text-decoration:none;letter-spacing:5px;}
#sitename h2{font-size:1.6em;}

Ich möchte aber, dass die Titelzeile an das Logo anknüpft. Wo liegt mein Fehler?

SirEctor

Gib dann dem #sidename noch ein padding-left

sojos

Danke, hat funktioniert

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Bild über skaliertes Hintergrundbild in Header...?

Jetzt mitmachen!