Twentyeleven: Einbindung Hintergrundbild - bitte um Hilfe

der_pe

Hallo,

ich habe folgendes Problem:

Ich habe für das Umsetzen einer Firmenpage ein vorgegebenes Design bzw. einen Hintergrund den ich da mit einbringen muss.
Die integrierte Funktion von Wordpress lässt da für meine Bedürfnisse sehr zu wünschen übrig und ich bin mittlerweile schon so weit, dass ich das Bild in 3 teile gestückelt habe und diese nun versuche per Header, Body, Footer einzubinden und den Body-teil quasi zu wiederholen ( je nach Textlänge der Seite ) und diese quasi mit Header und Footer wie ein Deckeln abzuschließen :D
Ich hoffe man versteht ungefähr was ich meine.
Der Hintergrund ist ein 4-Eck mit runden Ecken und soll den ganzen Content "einschließen".

Den Header-teil habe ich soweit eingebunden und "gecentert". Sieht auch ca. so aus wie ich mir das vorstelle.
Nun stehe ich vor dem Problem, dass ich einfach nicht weiß wie ich den Mittel und Schlussteil eingebunden bekomme. Habe da schon echt lange rumgewerkelt aber nichts so hinbekommen wie ich das gerne möchte.

Hier mal die Adresse zum Testsystem:

http://patrickschweichler.com/im-systeme/wordpress/

Der Hintergrund ist als .jpg vorhanden.

Habe auch etwas über "Backstretch" per jquery gefunden...aber nicht wirklich verstanden.
Wäre echt super wenn mir jemand ein bisschen dabei helfen könnte, da ich mir im Moment versuche ein 2. Standbein neben der Systemadministration aufzubauen :)

Vielen Dank

der_pe

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

pixselig

poste doch bitte mal ein bild mit dem gewünschten layout damit man sich vorstellen kann wie es aussehen soll.

lg, pixselig

der_pe

Der Hintergrund ist im Anhang bzw. im Post :)

der_pe

pixselig

AW: Twentyeleven: Einbindung Hintergrundbild - bitte um Hilfe

Und dieser Rahmen soll rund um die gesamte Website gehen?

Wieviel px breite hat er denn?

Die erste Variante wäre so wie du oben beschrieben hast -> bei entsprechender Ausrichtung sollte das funktionieren (stichwort : padding erhöhen damit das Hintergrundbild richtig sichtbar wird). Zusätzlich würde ich den mittleren teil nicht in den body einbauen sondern in das div "main". (Geht prinzipiell auch mit dem body, dann dürfen der header und footer allerdings auch keine vertikale margin besitzen. Auch bei grossen viewports und kurzem content können so "fehler " auftreten -> body ragt dann über den footer hinaus.)

Eine weitere Möglichkeit wäre es, den Rahmen mittels CSS einzubauen. Mittels border-(radius). Allerdings ist das Resultat der rahmenabrundung bei dickeren Rahmen nicht ganz ident mit deiner Vorlage. Dies ließe sich aber mittels zwei ineinander verschachtelten divs beheben. Meiner Meinung nach ist diese Lösung die sauberere -> allerdings habe ich auch einen Fabel dafür möglichst wenig Grafiken zu verwenden.

Wenn du zweiter Variante verwenden willst, dann schreibe mir bitte welch breite, welche Farbe und welchen Radius die Kanten bzw. der Rahmen hat/haben. Dann schaue ich mir das morgen am PC an und poste dir die codes.

LG, pixselig

PS: die drei Punkte gehören auch dazu?
Diese würde ich allerdings wirklich als Grafik einbinden. Wobei, mhmm... auch diese liessen sich via CSS erzeugen. Aber das wäre dann wahrscheinlich schon etwas übertrieben.

der_pe

Zitat von pixselig

Und dieser Rahmen soll rund um die gesamte Website gehen?

Genau! Sollte möglichst alles einrahmen.

Zitat von pixselig

Wieviel px breite hat er denn?

Das Bild hat 1260 x 810px. Also 1260px Breite.

Zitat von pixselig

Wenn du zweiter Variante verwenden willst, dann schreibe mir bitte welch breite, welche Farbe und welchen Radius die Kanten bzw. der Rahmen hat/haben. Dann schaue ich mir das morgen am PC an und poste dir die codes.
PS: die drei Punkte gehören auch dazu?

Farbe Rahmen: #E0E8EB

Den Radius der Kanten weiß ich ehrlich gesagt gar nicht...wie kann ich den denn herausfinden?

Und ja, die 3 Punkte gehören auch dazu :)

Vielen Dank

Narcanti

... sieht dann sicher gut aus, wenn der Monitor nur 1024px breit ist...

der_pe

Zitat von Narcanti

... sieht dann sicher gut aus, wenn der Monitor nur 1024px breit ist...

<3 danke für deinen Kommentar!

pixselig

hallo der_pe

nimm doch bitte mal das jetzige (obere) hintergrundbild heraus. das ist nämlich fehlerhaft implementiert -> es wird in ein div integriert welches sich zwischen head- und bodybereich befindet - also falsch platziert ist.

das das design etwas unter einer fixen breite leiden kann stimmt schon - wenn das allerdings die vorgaben sind, ja dann...
das es sich aber sicher negativ auf die mobile ansicht der webseite auswirkt ist leider klar - es sei denn du optimierst dannach auch die mobile ansicht.

so, der rest folgt bald...

der_pe

Zitat von pixselig

hallo der_pe
nimm doch bitte mal das jetzige (obere) hintergrundbild heraus. das ist nämlich fehlerhaft implementiert -> es wird in ein div integriert welches sich zwischen head- und bodybereich befindet - also falsch platziert ist.

Hab ich :)

Zitat von pixselig

das das design etwas unter einer fixen breite leiden kann stimmt schon - wenn das allerdings die vorgaben sind, ja dann...
das es sich aber sicher negativ auf die mobile ansicht der webseite auswirkt ist leider klar - es sei denn du optimierst dannach auch die mobile ansicht.
so, der rest folgt bald...

Über mobile Ansicht haben wir gar nicht geredet und ist auch nicht Teil meines Arbeitsauftrages.
Kommt vllt. später mal...

Vielen Dank

pixselig

sodala

1. Schritt:

style.css zeile 194

Code

.one-column #page {
    max-width: 690px;
}

ändern in

Code

.one-column #page {
    width: 1260px;
}

zur sicherheit auch noch -> style.css zeile 74

Code

#page {
    margin: 2em auto;
    max-width: 1000px;
}

ändern in

Code

#page {
    margin: 2em auto;
    width: 1260px;
}

2. Schritt:

öffne deine header.php und umschliesse hier das header-tag mit einem weiteren div -> diesem gebe zBsp die id "header_background"
-> das schliessen des divs am ende des header's nicht vergessen!

3. Schritt:

füge an das ende deiner style.css folgende zeilen

Code

#header_background {
    padding: 62px 60px 0 95px;
    background-image: url(../images/header_background.jpg);
}

4. Schritt:

-schneide vom logo.jpg die obersten 190px ab
-speichere sie unter dem namen "header_background.jpg" (ohne "" ;) )
-und lade sie in den ordner images deines themes hoch

5. Schritt:

öffne die footer.php und umschliesse hier das footer-tag mit einem weiteren div -> diesem gebe die id "footer_background"
-> auch hier das schliessen des divs am ende des footers nicht vergessen!

6. Schritt:

füge an das ende deiner style.css folgende zeilen

Code

#footer_background {
    padding: 0 60px 50px 95px;
    background-image: url(../images/footer_background.jpg);
}

7. Schritt:

-schneide vom logo.jpg die untersten 110px ab
-speichere sie unter dem namen "footer_background.jpg"
-und lade sie in den ordner images deines themes hoch

8. Schritt:

style.css zeile 2138

Code

#colophon {
    clear: both;
}

ändern in

Code

#colophon {
    clear: both;
    height: 60px;
}

wichtig: sollte dein footer höher werden (oder auch niedriger) so passe die mase aus Schritt 7 und 8 einfach dementsprechend an.

9. Schritt:

öffne wieder deine header.php und öffne dort, direkt nach dem header aber noch vor dem div"main", ein neues div mit der id "main_background"

10. Schritt:

öffne wieder deine footer.php und schliesse dort, direk nach "</div>" aber noch vor dem footer, wieder das oben geöffnete div.

11. Schritt:

füge an das ende deiner style.css folgende zeilen

Code

#main_background {
    padding: 0 60px 0 95px;
    background-image: url(../images/main_background.jpg);
    background-repeat: repeat-y;
}

12. Schritt:

-schneide vom (verbleibenden! ohne oberteil) logo.jpg die oberste 1px hohe reihe ab (über die gesamte breite)
-speichere sie unter dem namen "main_background.jpg"
-und lade sie in den ordner images deines themes hoch

so, fertig - ich hoffe ich habe nichts vergessen!

lg, pixselig

ps: die masse kannst du natürlich nach belieben anpassen

der_pe

Hey,

ich sag erstmal 10000000 dank.
Probiere das jetzt gleich aus und gebe nochmal Feedback :)

der_pe

der_pe

So...ich habe alles nach deinen Anweisungen befolgt aber mir wird der Hintergrund einfach nicht angezeigt.
Habe eben alles nochmal doppel überprüft... auch auf Anführungszeichen und ähnliches.
Wurde alles schön zurechtgerückt aber die Bilder fehlen irgendwie.

Bin ich einfach zu doof? :D

Der code von Header.php müsste doch so aussehen, oder?

PHP

<html <?php language_attributes(); ?>><!--<![endif]-->
<div id="header_background">
<head>
...
...
...
</head>
</div id="header_background">

und das selbe quasi bei footer.php.

der_pe

pixselig

du baust die divs falsch ein.

so sollte die header.php nach allen änderungen aussehen:
(die ergänzungen/änderungen habe ich rot markiert)

PHP

<?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?><!DOCTYPE html>
<!--[if IE 6]>
<html id="ie6" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 7]>
<html id="ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html id="ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 6) | !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php
	/*
	 * Print the <title> tag based on what is being viewed.
	 */
	global $page, $paged;


	wp_title( '|', true, 'right' );


	// Add the blog name.
	bloginfo( 'name' );


	// Add the blog description for the home/front page.
	$site_description = get_bloginfo( 'description', 'display' );
	if ( $site_description && ( is_home() || is_front_page() ) )
		echo " | $site_description";


	// Add a page number if necessary:
	if ( $paged >= 2 || $page >= 2 )
		echo ' | ' . sprintf( __( 'Page %s', 'twentyeleven' ), max( $paged, $page ) );


	?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?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' );


	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>
</head>


<body <?php body_class(); ?>>
<div id="page" class="hfeed">
    [COLOR="#FF0000"]<div id="header_background">[/COLOR]
	<header id="branding" role="banner">
			<hgroup>
				<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
			</hgroup>


			<?php
				// Check to see if the header image has been removed
				$header_image = get_header_image();
				if ( $header_image ) :
					// Compatibility with versions of WordPress prior to 3.4.
					if ( function_exists( 'get_custom_header' ) ) {
						// We need to figure out what the minimum width should be for our featured image.
						// This result would be the suggested width if the theme were to implement flexible widths.
						$header_image_width = get_theme_support( 'custom-header', 'width' );
					} else {
						$header_image_width = HEADER_IMAGE_WIDTH;
					}
					?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
				<?php
					// The header image
					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
					if ( is_singular() && has_post_thumbnail( $post->ID ) &&
							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
							$image[1] >= $header_image_width ) :
						// Houston, we have a new header image!
						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
					else :
						// Compatibility with versions of WordPress prior to 3.4.
						if ( function_exists( 'get_custom_header' ) ) {
							$header_image_width  = get_custom_header()->width;
							$header_image_height = get_custom_header()->height;
						} else {
							$header_image_width  = HEADER_IMAGE_WIDTH;
							$header_image_height = HEADER_IMAGE_HEIGHT;
						}
						?>
					<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
				<?php endif; // end check for featured image or standard header ?>
			</a>
			<?php endif; // end check for removed header image ?>


			<?php
				// Has the text been hidden?
				if ( 'blank' == get_header_textcolor() ) :
			?>
				<div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>">
				<?php get_search_form(); ?>
				</div>
			<?php
				else :
			?>
				<?php get_search_form(); ?>
			<?php endif; ?>


			<nav id="access" role="navigation">
				<h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
				<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
				<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
				<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
				<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
				<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
			</nav><!-- #access -->
	</header><!-- #branding -->
   [COLOR="#FF0000"] </div> <!-- #header_background -->[/COLOR]




    [COLOR="#FF0000"]<div id="main_background">[/COLOR]
	<div id="main">

Alles anzeigen

pixselig

im footer sollte es so aussehen:

PHP

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the id=main div and all content after
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 * @since Twenty Eleven 1.0
 */
?>


	</div><!-- #main -->
    [COLOR="#FF0000"]</div><!-- #main_background -->[/COLOR]
    [COLOR="#FF0000"]<div id="footer_background">[/COLOR]


	<footer id="colophon" role="contentinfo">


			<?php
				/* A sidebar in the footer? Yep. You can can customize
				 * your footer with three columns of widgets.
				 */
				if ( ! is_404() )
					get_sidebar( 'footer' );
			?>


			<div id="site-generator">
				<?php do_action( 'twentyeleven_credits' ); ?>
				<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyeleven' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyeleven' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'twentyeleven' ), 'WordPress' ); ?></a>
			</div>
	</footer><!-- #colophon -->
    [COLOR="#FF0000"]</div><!-- #footer_background -->[/COLOR]
</div><!-- #page -->


<?php wp_footer(); ?>


</body>
</html>

Alles anzeigen

der_pe

ups... :D
Vielen dank für deine schnelle Antwort!
Ich probier´s direkt aus.

pixselig

leider hat sich auch bei meinen verlinkungen ein kleiner fehler eingeschlichen -> ändere bitte das ende deiner style.css von

Code

#header_background {
    padding: 62px 60px 0 95px;
    background-image: url(../images/header_background.jpg);
}


#footer_background {
    padding: 0 60px 50px 95px;
    background-image: url(../images/footer_background.jpg);
}


#main_background {
    padding: 0 60px 0 95px;
    background-image: url(../images/main_background.jpg);
    background-repeat: repeat-y;
}

Alles anzeigen

in

Code

#header_background {
    padding: 62px 60px 0 95px;
    background-image: url(images/header_background.jpg);
}


#footer_background {
    padding: 0 60px 50px 95px;
    background-image: url(images/footer_background.jpg);
}


#main_background {
    padding: 0 60px 0 95px;
    background-image: url(images/main_background.jpg);
    background-repeat: repeat-y;
}

Alles anzeigen

der_pe

das mit den verlinkten bildern habe ich eben auch gemerkt. Aber irgendwie wiederholt sich jetzt der "footer_background" unendlich.

pixselig

so und noch eine kleine änderung:

style.css zeile 84

Code

#primary {
    [COLOR="#FF0000"]float: left;[/COLOR]
    margin: 0 -26.4% 0 0;
    width: 100%;
}

die rote zeile entfernen

der_pe

fantastisch! fast perfekt :)
Jetzt habe ich nur eine kleine Lücke zwischen main und footer

pixselig

habe es gerade gesehen (schaue live mit ;) )
habe aber noch nicht herausgefunden welches element daran die schuld trägt - moment...

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Twentyeleven: Einbindung Hintergrundbild - bitte um Hilfe

Jetzt mitmachen!