Hintergrundgrafik auf Homepage?

Lona · 15.04.2011

Ich wollte mal die Experten fragen-wie binde ich eine PNG Hintergrundgrafik auf der HP ein?
Hätte jemand mal den Code dazu??
Ich wäre sehr dankbar wenn ihr mir unter *die Arme* greifen könntet und danke schonmal ganz herzlich
LG Lona

Mr_Quick · 15.04.2011

AW: Hintergrundgrafik auf Homepage?

Du musst in der CSS

die Hintergrundgrafik einbauen

kannste auf meiner Seite sehen.

Hier der Code

Code:

body {
    background-image: url("[COLOR=Red]deinBild.png[/COLOR]");
    [COLOR=Red]margin-bottom: 0;[/COLOR]
[COLOR=Red]    margin-left: auto;[/COLOR]
[COLOR=Red]    margin-right: auto;[/COLOR]
[COLOR=Red]    margin-top: 0;[/COLOR]
[COLOR=Red]    padding-bottom: 0;[/COLOR]
[COLOR=Red]    padding-left: 0;[/COLOR]
[COLOR=Red]    padding-right: 0;[/COLOR]
[COLOR=Red]    padding-top: 0[/COLOR][COLOR=Red];[/COLOR]
}

Das rote ist nur von meiner CSS, müsstest Du bei deiner selbst anpassen, wenn nicht schon vorhanden

Lona · 15.04.2011

AW: Hintergrundgrafik auf Homepage?

Dankeschön für die schnelle Antwort...ich hab mich eventuell falsch ausgedrückt ich möchte EIN Bild einfügen dass in der Grösse wie es ist einmal angezeigt werden soll...ich habe ein PNG in der passenden Grösse...ich denke mal deines ist gekachelt....Trotzdem Danke

Mr_Quick · 15.04.2011

AW: Hintergrundgrafik auf Homepage?

Lona schrieb:
Dankeschön für die schnelle Antwort...ich hab mich eventuell falsch ausgedrückt ich möchte EIN Bild einfügen dass in der Grösse wie es ist einmal angezeigt werden soll...ich habe ein PNG in der passenden Grösse...ich denke mal deines ist gekachelt....Trotzdem Danke

Mein Bild, wird immer wiederholt und eingestellt, somit passt es sich schön der Page an.

Hast Du ein Foto, das nur einmal gezeigt werden soll, oder verstehe ich dich falsch?
Zeig doch mal bitte das Bild und die Page dazu, vielleicht dann auch etwas leichter zum verstehen.

Lona · 15.04.2011

AW: Hintergrundgrafik auf Homepage?

Hallo1
Die Page dazu ist nicht online-aber das Bild ist da..ich habe die Transparenz hochgestzt und den Duttone Effekt angewandt.

Bild

so soll es etwa werden

Ist sehr nett von dir dass du mir hilfst

Kayko · 15.04.2011

AW: Hintergrundgrafik auf Homepage?

Hallo Lona,

Lona schrieb:
Dankeschön für die schnelle Antwort...ich hab mich eventuell falsch ausgedrückt ich möchte EIN Bild einfügen dass in der Grösse wie es ist einmal angezeigt werden soll...ich habe ein PNG in der passenden Grösse...ich denke mal deines ist gekachelt....Trotzdem Danke

Wenn dein Bild nicht gekachelt werden soll, sollte dein Hintergrundbild im css ein "no-repeat" zugewiesen bekommen.

Code:

 body { background:url ("deinBild.png") no-repeat;}

Grüße
Kayko

Lona · 15.04.2011

AW: Hintergrundgrafik auf Homepage?

Danke für den Code.....Ich möchte es halt so haben ,schau wir mal ob ich es hinbekomme
LG Lona

Es ist nicht meine Seite,ich füge mal die CSS an ich kenne mich nicht so aus

Kayko · 15.04.2011

AW: Hintergrundgrafik auf Homepage?

Auf der genannten Seite ist das Bild einer Tabellenzelle zugewiesen, wie auch die ganze Seite als Tabelle aufgebaut ist.
Vielleicht sagst du mal, wie du die Seite im Prinzip aufgebaut hast. Evt. hast du ja einen Bereich, dem du den Hintergrund zuweisen willst, und nicht dem ganzen Body.
LG
Kayko

Mr_Quick · 15.04.2011

AW: Hintergrundgrafik auf Homepage?

Hi

Ich weiß jetzt nicht ob dies deine Rottweiler Seite ist.
In diesem Falle (Page) ist das Bild in der Mitte "Rottweilerzwinger" hier hinterlegt bzw. erreichbar

Wenn es deine Seite ist, dann tausche einfach dieses PNG Bild gegen deines aus.

//edit:

hast ja geschrieben das es nicht deine Seite ist. (übersehen)

Sollte es so sein wie auf dieser Seite dann ist der CSS Code davon

Code:

#in {
    background-color: #CAECF0;
    background-image: url("[COLOR=Red]HGbildGIF.png[/COLOR]");
    background-position: center center;
    background-repeat: no-repeat;
    color: #4F7487;
    font-family: arial,helvetica,tahoma,verdana,sans-serif;
    font-size: 97%;
    height: 800px;
    line-height: 125%;
    padding-bottom: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 30px;


}

das muss aber individuell auf deine Seite angepasst werden

Lona · 15.04.2011

AW: Hintergrundgrafik auf Homepage?

Code:

#breite {
width : 980px;
}
body {
margin-top : 10px;
margin-left : 0;
margin-right : 0;
margin-bottom : 20px;
background-color : #cfcfcf;
}
h2 {
color : #3c191b;
margin-bottom : 30px;
letter-spacing : 2px;
font-family : verdana, arial, helvetica, verdana, tahoma, sans-serif;
font-size : 22px;
font-variant : small-caps;
font-weight : normal;
}
.haupt {
border : 3px solid #fff;
}
.fvoben {
height : 80px;
background-image : url(images/fvoben.jpg);
background-repeat : repeat-x;
background-position : 50% 100%;
}
#top1 {
height : 0;
background-color : #fff;
height : 43px;
width : 100%;
text-align : center;
border-top : 1px solid #cfcfcf;
border-left : 1px solid #cfcfcf;
border-right : 1px solid #cfcfcf;
}
#top2 {
background-image : url(images/logo4.jpg);
background-repeat : no-repeat;
height : 260px;
background-color : #fff;
background-position : 50% 100%;
border : 1px solid #cfcfcf;
}
#top3 {
background-color : #f7f7f7;
height : 40px;
color : #3c191b;
width : 100%;
vertical-align : middle;
text-align : center;
border-left : 1px solid #f7f7f7;
border-right : 1px solid #cfcfcf;
background-image : url(images/fv1.jpg);
background-repeat : repeat-x;
background-position : 50% 50%;
}
#name {
height : 0;
letter-spacing : 2px;
color : #3c191d;
padding-left : 10px;
font-family : tahoma, verdana, arial, helvetica, verdana, tahoma, sans-serif;
font-size : 20px;
}
#inhalt {
height : 980px;
padding-top : 60px;
padding-bottom : 90px;
padding-left : 40px;
padding-right : 40px;
background-color : #fff;
letter-spacing : 0;
width : 100%;
vertical-align : top;
text-align : left;
color : #3c191b;
font-size : 14px;
line-height : 22px;
font-family : tahoma, verdana, arial, helvetica, verdana, tahoma, sans-serif;
letter-spacing : 0;
background-image : url(images/fv2.jpg);
background-repeat : repeat-x;
background-position : 50% 50%;
border : 1px solid #cfcfcf;
}
#fuss1 {
color : #6f6f6f;
background-color : #f7f7f7;
letter-spacing : 0;
font-size : 14px;
line-height : 20px;
font-family : trebuchet ms, verdana, arial, helvetica, verdana, tahoma, sans-serif;
height : 40px;
text-align : center;
vertical-align : middle;
width : 100%;
font-style : normal;
border-left : 1px solid #cfcfcf;
border-right : 1px solid #cfcfcf;
border-bottom : 1px solid #cfcfcf;
background-image : url(images/fv1.jpg);
background-repeat : repeat-x;
background-position : 50% 50%;
}
#fuss2 {
font-size : 12px;
line-height : 20px;
color : #3c191b;
background-color : #fff;
letter-spacing : 0;
font-family : tahoma, verdana, arial, helvetica, verdana, tahoma, sans-serif;
height : 100px;
text-align : center;
vertical-align : middle;
width : 100%;
font-variant : small-caps;
font-style : italic;
}
#s1 {
background-image : url(images/s1.jpg);
background-repeat : no-repeat;
background-position : 100% 0%;
}
#s2 {
background-image : url(images/s2.jpg);
background-repeat : repeat-x;
background-position : 0% 0%;
}
#s3 {
background-image : url(images/s3.jpg);
background-repeat : repeat-x;
background-position : 0% 0%;
}
#s4 {
background-image : url(images/s4back.jpg);
background-repeat : repeat-y;
background-position : 100% 100%;
height : 100%;
}
#s6 {
background-image : url(images/s6back.jpg);
background-repeat : repeat-y;
background-position : 0% 0%;
}
#s7 {
background-image : url(images/s7.jpg);
background-repeat : no-repeat;
background-position : 100% 0%;
}
#s8 {
background-image : url(images/s8.jpg);
background-repeat : repeat-x;
background-position : 0% 0%;
}
#s9 {
background-image : url(images/s9.jpg);
background-repeat : no-repeat;
background-position : 0% 0%;
}

CheapShot · 15.04.2011

AW: Hintergrundgrafik auf Homepage?

Hallo,

.fvoben { height : 80px;
background-image : url(images/fvoben.jpg); hier dein Bildnamen einfügen, dein Bild muss im selben Ordner sein wie das Orginal

background-repeat : repeat-x; hier no-repeat

background-position : 50% 100%; hier 100% 100%

so sollte es klappen ....

sonst einfach nochmal melden .....

Lona · 15.04.2011

AW: Hintergrundgrafik auf Homepage?

Es hat leider nicht geklappt...hab es so gemacht wie du es gesagt hast:'(

Mr_Quick · 16.04.2011

AW: Hintergrundgrafik auf Homepage?

Dann würde ich evtl. vorschlagen, das Du die Page online stellst und wir diese mal ansehen können, dadurch kann man explizit schauen wo dies sitzt.
So ist es meineserachtens nur ne Suche.

Lona · 16.04.2011

AW: Hintergrundgrafik auf Homepage?

Sie ist online,ich hoffe ihr findet an was es liegt...ich hab keine Ahnung (nur ganz wenig)von css...deshalb habe ich es mal mit einem Template versucht,sie ist natürlich nicht fertig und die Links gehen noch nicht

mausz · 16.04.2011

AW: Hintergrundgrafik auf Homepage?

Willst du das Hintergrundbild denn über die komplette Seite, also dahin, wo es nun grau ist?
Oder soll der weiße Contentbereich (also das unter "Gerry und Mizzi") mit dem Hintergrundbild versehen werden?

Lona · 16.04.2011

AW: Hintergrundgrafik auf Homepage?

Genau der weisse Contentbereich...aber eher unterhalb......Ich versuche es schon solange und bekomme es nich gebacken.
LG Lona

mausz · 16.04.2011

AW: Hintergrundgrafik auf Homepage?

Hmm. Du mischst Tabellen und Container. Vielleicht solltest du als Grundlage erst einmal an anderes Template nehmen.
Dieses ist natürlich gerade für Anfänger extrem unübersichtlich.
Möchtest du vom Aufbau her genau so etwas? Oder war es erst einmal nur zum üben?
Ich könnte sonst schauen, ob ich dir heut Abend ein Template zusammen schreibe.

Lona · 16.04.2011

AW: Hintergrundgrafik auf Homepage?

Hallo Mausz!
Ich würde gerne vom Aufbau her so etwas haben,weil mir die Navigation genau so richtig wäre,ich habe schon gemerkt-es ist echt nicht übersichtlich...hab mich auch schon geplagt mit dem Valide bekommen,da waren auch etliche Fehler drin,in der css und auch im HTML-das hab ich aber behoben.
LG Lona

Kayko · 16.04.2011

AW: Hintergrundgrafik auf Homepage?

Hallo Lona,

du schreibst, dass das Bild die passende Größe hat. Wofür? Für den Bereich #inhalt ist es nicht passend.

Da du aber sagst, dass das Bild dort in den Hintergrund soll, müsste der Code wie folgt lauten:

Code:

  #inhalt {
  background-image: url("http://www7.pic-upload.de/15.04.11/2ljzhcqhuvqp.png"); /*ich habe hier den absoluten Pfad zu deinem Beispielbild genommen – du müsstest den relativen Pfad nehmen*/
  background-position: center center; /* oder eine andere Positionierung*/
  background-repeat: no-repeat;
  }

Ich habe es im Firebug ausprobiert und es klappt auf diese Weise.
LG
Kayko

P.S. abgesehen vom Quelltext gefällt das Template mir auch!

Mr_Quick · 16.04.2011

AW: Hintergrundgrafik auf Homepage?

Hallo

Hab jetzt mal nachgeschaut und versucht aus den vorherigen Fragen das rauszuziehen was es sein könnte.
Aber wirklich nicht verstanden.

Im CSS ist

der Hintergrund in dem Weiß / grauen Bereich

#inhalt

zu finden.

dort die zweite Zeile ist für den Hintergrund.

//edit:

Mein Vorredner war schneller

Ich hab dir mal nen Scrrenshot dazu gemacht, schaut nicht schön aus

Template gefällt mir aber auch