Antworten auf deine Fragen:
Neues Thema erstellen

Hintergrundbild - wie lösen ?

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

00110100 00110010

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 .
 
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

Hat es drauf

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
 

patrick_l

Hat es drauf

AW: Hintergrundbild - wie lösen ?

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

Grüße Patrick
 
AW: Hintergrundbild - wie lösen ?

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

Hat es drauf

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
 
Zuletzt bearbeitet:
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

Hat es drauf

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
 
Zuletzt bearbeitet:
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

undefined

AW: Hintergrundbild - wie lösen ?

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.
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...
 
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

Hat es drauf

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?
 
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?

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.477
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben