hintergrundfoto bildschirmfüllend?

Antworten
nina???
Beiträge: 3
Registriert: Mi 4. Nov 2015, 16:02

hintergrundfoto bildschirmfüllend?

Beitrag von nina??? » Do 5. Nov 2015, 00:22

hallo zusammen

ich finde für folgendes problem keine lösung: ich möchte ein foto als bildschirmfüllenden hintergrund verwenden, und zwar so, dass es mitwächst/-schrumpft, wenn man die bildschirmgrösse verändert.
der befehl "background-size: cover" würde mein problem wohl lösen, wird aber von kompozer nicht verstanden.
in der google-suche wird immer diese lösung http://www.drweb.de/magazin/100-hinterg ... m-browser/ genannt, die funktioniert aber nicht: das bild wird verzerrt bei veränderung der bildschirmgrösse.
hat jemand eine idee? ich wäre sehr dankbar.
liebe grüsse,
nina???

camouflage1984
Beiträge: 239
Registriert: Di 19. Aug 2014, 14:34

Re: hintergrundfoto bildschirmfüllend?

Beitrag von camouflage1984 » Do 5. Nov 2015, 02:52

Hallo nina???
nina??? hat geschrieben:der befehl "background-size: cover" würde mein problem wohl lösen, wird aber von kompozer nicht verstanden.
Kompozer kann nur css2, deshalb löscht er background-size: cover;
Du kannst das aber einfach umgehen. Erstelle mit einem Texteditor wie Notepad++ oder Bluefish eine css Datei, gib dort Dein background-size: cover; ein und die id, klasse oder body für das verwendet werden soll und speichere diese ab.

Öffne KompoZer und gehe folgendermaßen vor:

Klicke auf das css icon und dann auf Linkelement
cover_1.jpg
cover_1.jpg (9.48 KiB) 2292 mal betrachtet
Binde jetzt deine css ein.
cover_2.jpg
cover_2.jpg (11.14 KiB) 2292 mal betrachtet
Seite Speichern.

Öffne diese css Datei nicht mit dem Kompozer eigenen css-Editor, das führt zum Löschen der Anweisung.

Gruß
Dimi
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

nina???
Beiträge: 3
Registriert: Mi 4. Nov 2015, 16:02

Re: hintergrundfoto bildschirmfüllend?

Beitrag von nina??? » Fr 6. Nov 2015, 21:54

hallo dimi

super, vielen vielen dank!!! ich bin fast wahnsinnig geworden... jetzt klappt es!
liebe grüsse
nina???

camouflage1984
Beiträge: 239
Registriert: Di 19. Aug 2014, 14:34

Re: hintergrundfoto bildschirmfüllend?

Beitrag von camouflage1984 » Fr 6. Nov 2015, 23:18

Hallo nina???

Freut mich das es geklappt hat.

Gruß
Dimi
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

nina???
Beiträge: 3
Registriert: Mi 4. Nov 2015, 16:02

Re: hintergrundfoto bildschirmfüllend?

Beitrag von nina??? » Mo 9. Nov 2015, 11:33

hallo dimi

ich stehe wieder an...
ich möchte gerne, dass das hintergrundbild, der header sowie die navigation im gleichen verhältnis mitwachsen oder -schrumpfen, wie zb auf dieser seite: http://www.lindaloosli.ch
ich komme aber mit der einrichtung des headers nicht klar. er soll wie auf der obengenannten seite nur eine schrift sein.

auf dieser seite wird übrigens das hintergrundbild in jeder grösse nirgends abgeschnitten - das ist mir nicht gelungen; bei ganz kleinem bzw ganz grossem bildschirm schneidet es mir den unteren rand ab. meine externe background-datei sieht so aus:
backgrounddatei extern.png
backgrounddatei extern.png (26.57 KiB) 2129 mal betrachtet
habe ich was vergessen?
kannst du mir da weiterhelfen? ich habe im einsteiger- sowie fortgeschrittenenkurs gesucht, aber nichts gefunden.
danke, liebe grüsse
nina???

camouflage1984
Beiträge: 239
Registriert: Di 19. Aug 2014, 14:34

Re: hintergrundfoto bildschirmfüllend?

Beitrag von camouflage1984 » Mo 9. Nov 2015, 21:40

Hallo nina???

Du must noch folgendes Angeben in Deiner css:

Code: Alles auswählen

html{
height:100%;
}
body{
height:100%; 
margin:0; 
padding:0;
}
dann funktioniert es auch mit dem ausfüllenden Bild!
nina??? hat geschrieben: der header sowie die navigation im gleichen verhältnis mitwachsen oder -schrumpfen, wie zb auf dieser seite: http://www.lindaloosli.ch
nina-1.jpg
nina-1.jpg (46.68 KiB) 2125 mal betrachtet
nina-2.jpg
nina-2.jpg (41.94 KiB) 2125 mal betrachtet
nina-3.jpg
nina-3.jpg (37.69 KiB) 2125 mal betrachtet
Es wird nicht wirklich angepasst angezeigt ;) wie du siehst.

Damit die Überschrift, die als Bild vorliegt, angepasst angezeigt wird, musst Du Folgendes in Deine css Schreiben:

Code: Alles auswählen

img{
max-width:100%; 
height:auto;
}
Gruß
Dimi
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast