Hintergrundbild - wie lösen ?

BlackBoSs · 26.07.2012

Hallo Leute,

Wie kann ich eigentlich mein Hintergrundbild bzw Farben im HTML / CSS lösen ?

Unten hab ich ein Bild angehängt.

Ich will den Hintergrund im Headerbereich mit Rot und Dunkelgrau genauso wie auf dem Bild haben und genauso Footer Hintergrund.

Ich weiss aber nicht wie ich es in HTML/CSS umwandle?!

Soll ich einfach im HTML 2x wrapper-inner erstellen und bei einem background:red und bei dem anderen background:dunkelgrau einfügen ?

bin bissl verwirrt wie ich das hinbekomme.

würde mich über ratschläge freuen.

leveler · 26.07.2012

AW: Hintergrundbild - wie lösen ?

http://www.css4you.de/backgroundproperty.html
http://www.css4you.de/colorproperty.html

BlackBoSs · 26.07.2012

AW: Hintergrundbild - wie lösen ?

leveler schrieb:
http://www.css4you.de/backgroundproperty.html
http://www.css4you.de/colorproperty.html

Erstmals Danke für deinen Posting.
Nur hab ich leider nicht wirklich meine Antwort bekommen.

Wie kann ich 2 (rot und dunkelgrau) Farben im CSS einbauen bzw im HTML ?

leveler · 26.07.2012

AW: Hintergrundbild - wie lösen ?

in html hast Du Dein(e) Element(e), zB ein div (mit einer id oder klasse ), das sprichst Du in css konkret an und weisst im die gewünschte Farbe zu. Aber Du findest diese Informationen auch auf der verlinkten Seite .

BlackBoSs · 26.07.2012

AW: Hintergrundbild - wie lösen ?

Werde es mal probieren ... Melde mich hier noch über weiteres.

Danke vielmals.

Liebe Grüße

BlackBoSs · 06.08.2012

AW: Hintergrundbild - wie lösen ?

Hallo Leute,

Das mit dem Hintergrundbild hab ich schon gelöst

habe einfach dem html tag hintergrund farbe gegeben und dann dem body tag ein background vergeben und dann repeat-x center und top vergeben.

Was ich aber nicht verstehe ist, mein Logo (eingegeben als h1 mit text-indent und backgroundbild) rutscht auf die linke seite obwohl es sich im wrapper befindet?

Kann mir jemand sagen wieso der wegrutscht?

patrick_l · 06.08.2012

AW: Hintergrundbild - wie lösen ?

Es wäre sinnvoll und würde uns das raten ersparen wenn du uns den Link zu deiner Website oder den Quellcode von deiner Website posten würdest. Dafür kannst du das HTML od Code-Tag verwenden.

HTML:

[/ html] (ohne Leerstelle) oder für dein CSS [code] verwenden.

Grüße Patrick

BlackBoSs · 06.08.2012

AW: Hintergrundbild - wie lösen ?

Oh tschuldigung hab total vergessen.

Link:

patrick_l · 06.08.2012

AW: Hintergrundbild - wie lösen ?

Verpasse dem Div "headerinner" ein margin auto.
Jetzt liegt dieser ganz Links.

Grüße Patrick

BlackBoSs · 06.08.2012

AW: Hintergrundbild - wie lösen ?

patrick_l schrieb:
Verpasse dem Div "headerinner" ein margin auto.
Jetzt liegt dieser ganz Links.

Grüße Patrick

Habe vorhin die headerinner rausgenommen hab einfach durch header ersetzt.
Da es so übersichtlicher ist und genauso gut funktioniert.

Habe dem Header einfach gerade eine margin:auto; vergeben ..

hat sich nichts geändert ..
Das Logo sollte im Wrapper drinnen linksbündig sitzen ..

rutscht einfach nicht weg ..

patrick_l · 06.08.2012

AW: Hintergrundbild - wie lösen ?

Ich hätte den Div "inner" gelassen. Aber so denn. Du musst jetzt mit margin das Logo entsprechend positionieren. Aber wie gesagt, ich würde es mit einem weiteren Div innerhalb des Header-Tags lösen. So müsstest du nur das von mir genannte margin-auto setzen. Auch wirst du so mit unterschiedlichen Viewports Probleme bekommen.

z.B. so:

HTML:

<header>
    <div class="inside">   
    </div>
    <nav>
        <ul>
            <li><a href="#">Navi</a></li>
        </ul>
    </nav>
</header>

Grüße Patrick

BlackBoSs · 06.08.2012

AW: Hintergrundbild - wie lösen ?

Meinst du so:

HTML:

HTML CODE:

<div class="wrapper"> <!-- Anfang Wrapper -->
    	<header> <!-- Anfang Header -->
        	<div id="headerinner">
            <h1><a href="index.html">Tekinstallationen.at</a></h1>
            </div>
    			<nav>
   					<ul>
            			<li><a href="index.html">Hauptseite</a></li>
               			<li><a href="#">Service</a></li>
              	 		<li><a href="#">Angebote</a></li>
               		 	<li><a href="#">Referenzen</a></li>
               			<li><a href="#">Kontakt</a></li>
               		 	<li><a href="#">Impressum</a></li>
                     	<div style="clear:both;"></div>
               	   </ul>
        	 </nav> 
            	<p>Tochtergesellschaft der Firma TEK Group // www.tekgruppe.at</p>
        </header> <!-- Ende Header -->

und CSS Code:

HTML:

#headerinner {margin:auto;}

so wie ich es gemacht hab funktioniert aber auch nicht ...

patrick_l · 06.08.2012

AW: Hintergrundbild - wie lösen ?

Das kann ja auch nicht funktionieren. Du musst dem headerinner auch eine Breite geben. Sonst ist klar dass das margin auto keine Wirkung zeigt. Hier mal fix ein Beispiel wie ich das meine:

HTML:

<header>
    <div class="headerinner">
        <p>Tochtergesellschaft...</p>
    </div>
    <nav>
        <ul>
              <li><a href="#">Punkt1</a></li>
            <li><a href="#">Punkt2</a></li>
            <li><a href="#">Punkt3</a></li>
        </ul>
</header>

CSS

Code:

header {width: 100%; background-color: ??;}
.headerinner {width:854px; margin:auto;}
header nav {width: 100%; background-color: ??;}
header nav ul {width:854px; margin:auto;}

Grüße Patrick

BlackBoSs · 06.08.2012

AW: Hintergrundbild - wie lösen ?

Nope so hats auch nicht funktioniert.

im css hab ich header keine width:100% gegeben weil dann rutscht mein content ganz hinauf.

so sieht es grad bei mir aus:

HTML Code:

HTML:

	<div class="wrapper"> <!-- Anfang Wrapper -->
    	<header> <!-- Anfang Header -->
        	<div id="headerinner">
            <h1><a href="index.html">Tekinstallationen.at</a></h1>
            </div>
    			<nav>
   					<ul>
            			<li><a href="index.html">Hauptseite</a></li>
               			<li><a href="#">Service</a></li>
              	 		<li><a href="#">Angebote</a></li>
               		 	<li><a href="#">Referenzen</a></li>
               			<li><a href="#">Kontakt</a></li>
               		 	<li><a href="#">Impressum</a></li>
                     	<div style="clear:both;"></div>
               	   </ul>
        	 </nav> 
            	<p>Tochtergesellschaft der Firma TEK Group // www.tekgruppe.at</p>
        </header> <!-- Ende Header -->

und mein CSS:

HTML:

* { padding:0; margin:0px; outline:0;}

html, body {mind-width:100%; height:100%;}
html {background:#a9cbe1;}
body {background:url(../images/background-header_02.jpg) repeat-x center top;}


.wrapper {width:854px;margin:auto;}

h1 a {background:url(../images/logo_03.png) no-repeat; width:253px; height:112px; text-indent:-99999999px; position:absolute; top:10px; left:45px;}

header nav {width:100%;}
nav {width:854px; height:50px; position:relative; background:url(../images/navi_bg.jpg) repeat-x center bottom;}
nav ul {list-style:none; position:absolute; top:165px;}
nav ul li {float:left;}
nav ul li a {color:#FFF; text-decoration:none; padding:0 15px; text-align:center; font:14px "Lucida Sans Unicode", "Lucida Grande", sans-serif}

header {background:#e8f4fc; width:854px; height:200px;}
header p {color:#96b3ba; margin-left:310px;}

#content {width:854px; height:auto; background:#FFF;}

#headerinner {width:854px; margin:auto;}

pack es gerade nicht mehr

) solche kleinigkeiten machen einen fertig

cebito · 06.08.2012

AW: Hintergrundbild - wie lösen ?

BlackBoSs schrieb:
im css hab ich header keine width:100% gegeben weil dann rutscht mein content ganz hinauf.

Blockelemente haben von Hause aus 100% Breite des umgebenden Elements, die Angabe kann man sich also sparen, sollte nichts anderes vorgesehen sein.

BlackBoSs schrieb:
so sieht es grad bei mir aus:

Sollen wir es nachbauen? Dann fehlen uns immer noch die Bilder! Besser wäre, du stellst einen Link zu deinem Versuch rein. Sollte noch kein Webspace vorhanden sein, benutze einen Freehoster. Weitere Infos findest du hinter dem roten Link in meiner Sig...

BlackBoSs · 17.08.2012

AW: Hintergrundbild - wie lösen ?

Hallo,

Wie kann ich meinem Footer ein Hintergrundbild oder Farbe geben so dass es auf der x achse verläuft (repeat-x) ... wie im header bereich..

habe einfach ein div mit der id footer erstellt, und versucht dieser ein background zu vergeben und dann repeat-x ... leider nicht gegangen ...

kann mir jemand bitte tipps geben wie ich das lösen kann ?

hier der link : www.media-colore.at/tek/

lg

Myhar · 17.08.2012

AW: Hintergrundbild - wie lösen ?

Ich weiß nicht, wo dein Problem ist. Bei mir wird bei deinem Beispiellink für das div mit der ID="footer" eine HT-Grafik angezeigt (background-header-02.jpg).
Kannst du dein Problem genauer erläutern?

BlackBoSs · 17.08.2012

AW: Hintergrundbild - wie lösen ?

Myhar schrieb:
Ich weiß nicht, wo dein Problem ist. Bei mir wird bei deinem Beispiellink für das div mit der ID="footer" eine HT-Grafik angezeigt (background-header-02.jpg).
Kannst du dein Problem genauer erläutern?

hey myhar,

1. ich will im footer eine hintergrundgrafik bzw farbe hinzufügen damit es genauso auf die komplette breite des bildschirms verläuft wie im header bereich ...

2 . und dann noch eine grafik drauf die über dem wrapper hinaus geht ... würd ich auch gern wissen wie ich es positionieren muss weil das bild breiter als mein wrapper ist.

siehe screenshot:

verständlicher?

lg & danke für die hilfe jetzt im vorhinein