Header-Bild und Body-Füllung

Yogixxx

Hi Ihr!
Ich habe ein Problem mit dem Design meines Themes...
Kurz erklärt will ich als Header ein Bild haben und wenn das Bild zu Ende ist, soll ein weiteres Bild den Rest auffüllen und sich wiederholen. Der Absatz in der Style.css sieht so aus:

body{
background:#12345 url('img/header.png') repeat-x;
text-align:center;
margin:0;
padding:0;
font-size:62.5%;
font-family:GillSans, Calibri, Trebuchet, sans-serif;
color:#2e1737;
}

Im jetztigen Fall füllt er ja nachdem er das Header-Bild eingefügt hat, den Rest mit der Farbe #12345 auf. Ich will aber, dass er den Rest auch mit einem sich wiederholendem Bild auffüllen soll... wie bekomme ich das hin, ohne das das ertse Bild überschrieben wird!?!? Jemand ne Ahnung?!?!?

Danke für euere Hilfe!!!

Gruß, Yogi

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

perryzelda

2 Hintergrund Bilder in einen Div definieren geht nicht.

Du könntes folgendes machen:

gibt dem Header das Hintergrundbild, das sich wiederholen soll.
In den Header ( wenn nicht sowieso schon vorhanden) kommt ein weiteres Div oder ein Link, dem du dann das 1x-Bild als Hintergrund gibts

css:

Code

#header { background: ....}


#header a { background:...; width:...; height:... [COLOR=Red]display:block;[/COLOR]}

html:

HTML

<div id="header"><a href="...">... </a></div>

msossi

Hallo, ich habe ein ganz ähnliches Problem. Ich möchte meinem Header auch noch ein weiteres Bild hinzufügen, weiß aber nicht genau wie ich die header.php ändern muss?!

So sieht meine header.php zur Zeit aus:

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'); ?>" />
<meta http-equiv="Language" content="" />
<meta name="language" content="" />
<meta name="author" content="" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if(is_home() || is_single() || is_page() ) { 
  echo "<meta name=\"robots\" content=\"index,follow\"/>\n"; 
} else { 
  echo "<meta name=\"robots\" content=\"noindex,follow\"/>\n"; 
} ?>


<?php wp_head(); ?>


<title>
<?php
if ( is_home() ) {
// Blog's Home
echo get_bloginfo('name');
} elseif ( is_single() or is_page() ) {
// Single blog post or page
wp_title(''); echo ' /// '.get_bloginfo('name');
} elseif ( is_category() ) {
// Archive: Category
echo _e('Category','zyblog27').' &quot;'; echo single_cat_title().'&quot; /// '.get_bloginfo('name');
} elseif ( is_day() ) {
// Archive: By day
echo _e('Archive for','zyblog27').' '.the_time('d').'. '.the_time('F').' '.the_time('Y').' /// '.get_bloginfo('name');
} elseif ( is_month() ) {
// Archive: By month
echo _e('Archive for','zyblog27').' '.the_time('F').' '.the_time('Y').' /// '.get_bloginfo('name');
} elseif ( is_year() ) {
// Archive: By year
echo _e('Archive for the year','zyblog27').' '.the_time('Y').' /// '.get_bloginfo('name');
} elseif ( is_search() ) {
// Search
echo 'Suche nach &lsaquo;'.wp_specialchars($s, 1).'&rsaquo; /// '.get_bloginfo('name');
} elseif ( is_404() ) {
// 404
echo _e('Error 404 - Not Found','zyblog27').' /// '.get_bloginfo('name');
} else {
// Everything else. Fallback
wp_title(''); echo ' /// '.get_bloginfo('name');
}
?>
</title>
</head>


<body>
<div id="container">
<div id="sitename">
<h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>


<?php if (is_page()) { $highlight = ""; } else {$highlight = "current"; } ?>


<div id="mainmenu">
<ul class="level1">
<li class="<?php echo $highlight; ?>"><a href="<?php echo get_settings('home'); ?>"><?php _e('Home','zyblog27'); ?></a></li>
<?php
    if(function_exists("wp_andreas09_nav")) {
      wp_andreas09_nav("sort_column=menu_order&list_tag=0&show_all_parents=1&show_root=1");
    }
?>
</div>


<div id="wrap">

Alles anzeigen

perryzelda

msossi

PHP

<div id="sitename">
<h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>

in diesem Element - zumindest sieht es danach aus lt. dem Code.

was oben #header war heisst bei dir #sitename
wobei du ein Bild in alle Elemente als Hintergrund einfügen kannst.
#sidename, #sitename h1, #sitename h1 a, #sitename h2
(alles in der style.css)

Allerdings: Ich kenne dein Stylesheet nicht, also musst du sowieso erst selbst testen.

msossi

Ja, aber was muss ich da einfügen, wo oben die "..." sind?!

perryzelda

Wie gut kennst du dich mit CSS aus ? Wenn nicht so gut, musst du ein paar Minuten investieren.

Schau dir dazu einmal das an:

SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder

Du brauchst den Pfad zu Bild, die Maße und die Position. Diese Daten werden dann anstatt der "..." eingefügt.

msossi

Hab ich das richtig verstanden? Ich muss erst mal den Code

PHP

<div id="header"><a href="...">... </a></div>

in meine header.php einfügen und dann kann ich in meiner style.css den Pfad zum Bild etc. angeben. Ich denke, dass ich das mit dem CSS hinbekomme, aber mein eigentliches Problem ist, wie genau muss der Code für meine header.php lauten und wo genau soll ich den dann einfügen? Könntest du mir vielleicht kurz anhand meines oben dargestellten Codes den konkreten Code sagen? Im Grunde geht es mir um die fett markierten Punkte in dem html-Code oben, nicht um den CSS-Code.

perryzelda

nein, das nicht.

du verwendest bei dir diesen Teil

PHP

<div id="sitename">
<h1><a href="<?php echo get_settings('home'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>

und weist diesen Elementen (#sidename, #sitename h1, #sitename h1 a, #sitename h2 ) nach Bedarf im Stylesheet Hintergrund etc. zu

msossi

Danke, ich habe allerdings folgendes Problem. Ich hab jetzt rechts im Header eine Grafik angezeigt, wenn ich allerdings eine zweite Grafik im Header links platzieren möchte, wird die Grafik rechts nicht mehr angezeigt, oder umgekehrt.

Kann mir jetzt noch jemand sagen, wie ich 2 oder mehr Grafiken gleichzeitig im Header platzieren kann?!

perryzelda

ein element mit 2 Hintergrundbildern wird nichts !!
(ausser beim Safari)

gib je eines in übereinander liegende Container (das machst du mit z-index}
dafür hast du zB. Sitename und h1 zur Verfügung

Nachtrag:
habe weiter oben geschrieben:

Zitat

2 Hintergrund Bilder in einen Div definieren geht

das ist ein Blödsinn - tschuldgung
hab es jetzt ausgebessert Es geht nicht !! (ausser eben teilweise im Safari)

Yogixxx

Ich sag schonmal Danke...

Ich habe das ganze anders gelöst.
Ich weiß zwar nicht, ob da noch Probleme auf mich zu kommen, aber meine Lösung sieht folgendermaßen aus:

in die header.php habe ich foldenden Code eingefügt:

in die stye.css :

.TOP {background: url('img/header.png') repeat-x;}

Das klappt auch zumindest auf den ersten schnellen Blick...
Mal sehen, ob es auch jeder Browser, Auflösung etc. das so macht, wie ich will...

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Header-Bild und Body-Füllung

Jetzt mitmachen!