Juergens-Workshops.de Forum › HTML und Co › Webeditoren
Hintergrundbild und vergrößern/kleinern vom Content

Ansichts-Optionen
Hintergrundbild und vergrößern/kleinern vom Content
MarSch
Gast
 
#1
21.05.2015, 17:10
Hallo,

ich bin neu hier und auch seit 15 Jahren wieder im Webseiten "machen". Smile

Ich habe WebPlus StarterEdition getestet und der Support sagte mir nun nach Anfrage das zwei Dinge die ich machen möchte auch nicht mit der neusten Version der X8 erzeugt werden, diese werde ich allerdings kaufen um dann den HTML zu editieren. Ich muss also nach dem die Seite grundsätzlich fertig ist etwas in dem HTML Code einfügen. Also ist meine Frage, an welcher Stelle muss ich was einfügen damit folgendes geht:

Mit Bezug auf diese Seite:

http://www.gilmoreroberts.co.uk/

1. Möchte ich ein Hintergrundbild einfügen das sich wie auf dieser Seite immer mit der Browserfenstergröße verkleinert/vergrößert, es ist also immer das ganze Foto zu sehen nicht wie sonst das Teile aus dem sichtbaren Bereich fallen oder um das Foto herum dann schwarzer oder weisser Rand zu sehen ist oder ich das Foto doppeln lassen muss usw. ...

2. Möchte ich wie auf dieser Seite das wenn ich Strg + -/+ verwende nur der Content selber kleiner/größer wird, nicht aber das Hintergrundbild mit zoomt...

Kann mir einer Helfen bitte?

Vielen Dank und viele Grüße
Markus
Zitieren
Tschipiar Offline
Moderator
Beiträge: 647
Themen: 94
Danke erhalten: 20 in 15 Posts
Danke gesagt: 9
Registriert seit: 05.07.2014
#2
21.05.2015, 18:39 (Dieser Beitrag wurde zuletzt bearbeitet: 21.05.2015, 18:51 von Tschipiar.)
Salü Markus

Zwar arbeite ich nicht mit Webeditoren, aber folgende HTML5-Codes könnten Dir evtl. weiter helfen:

Ein Bild anpassen geht grundsätzlich mit CSS zwischen <style>...</style> (wenn Du das in Deinem Webeditor einfügen kannst).

1. alle Bilder egal wo und wie einfach an jede Display-/Bildschirm- oder Div-Grösse automatisch anpassen:
Code:
img {
border:none;
max-width:100%;
height:auto;
}

2. ein Hintergrundbild in einem Div anpassen:
Code:
div#divname {
background-image: url(images/bild.jpg);
background-repeat: no-repeat;
background-position: 0% 0%; /* mein Beispiel = oben links ausgerichtet */
background-size: auto 150px;  /* mein Beispiel = Breite automatisch, Höhe 150px */
}

3. ein Hintergrundbild, das sich hinter allem automatisch an Display-/Bildschirmgrösse anpasst
Code:
body {
background-image: url(images/background.jpg);
background-size:  cover;
background-repeat: no-repeat;
background-position: center center; /* zentriert */
}
Zitieren
koter Offline
Profi Member
Beiträge: 1.443
Themen: 11
Danke erhalten: 278 in 236 Posts
Danke gesagt: 26
Registriert seit: 24.03.2012
#3
22.05.2015, 02:28
Hallo Markus,

MarSch schrieb:...also immer das ganze Foto zu sehen nicht wie sonst das Teile aus dem sichtbaren Bereich fallen oder um das Foto herum dann schwarzer oder weisser Rand zu sehen ist oder ich das Foto doppeln lassen muss usw. ...

das geht nicht. Die Besucher Deiner Seite werden ja nicht alle das gleiche Gerät nutzen. Ein Smartphone hochkant, ein 16:9 TFT, ein Beamer oder was noch für Möglichkeiten gibt: Alle haben unterschiedliche Seitenverhältnisse. Dein Hintergrundbild hat aber ein bestimmtes Seitenverhältnis. Es muss also etwas aus dem sichtbaren Bereich fallen. Auch bei der Seite die Du als Beispiel genannt hast, passiert das.

Das CSS musst Du bei WebPlus wahrscheinlich als Inline-Style in den Quellcode setzen, um die Stile des vom Programm generierten Codes zu überschreiben:

[Bild: zwischenablage01zjsd9.jpg]

Das ist Gabys 3. Code mit einer zusätzlichen Zeile.

Das Ergebnis kannst Du hier sehen.

Das wunderbare Hintergrund-Bild stammt von Skifan (vielen Dank dafür!)

Gruß

Koter
Zitieren
MarSch
Gast
 
#4
23.05.2015, 09:51
Salü und Moin Moin! Smile

Vielen Dank für die ganzen Infos!

Habe jetzt folgendes ausprobiert und sofort das gewollte erzielt:

<body style="height:1558px;background:#ffffff;
background-image: url(http://www.???.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
height:auto
/*Page Body Style*/">

Natürlich ist es nicht immer voll zusehen wenn ich das Fenster verkleiner/größer aber bei verschiedenen Monitorgrößen die all 16:9 sind (wie das Bild) wird's immer richtig angeigt und bei Strg +/- bleibt's eben wie es ist...

Wofür brauche ich "background-size:cover" wenn ich doch "height:auto" habe? Die erste "Height:1558" Angabe ist ja auch ausser Kraft gesetzt durch "height:auto" oder?

LG
Markus
Zitieren
morphsuite Offline
Profi Member
Beiträge: 1.263
Themen: 100
Danke erhalten: 1 in 1 Posts
Danke gesagt: 0
Registriert seit: 05.05.2012
#5
23.05.2015, 10:27
Moinsen,

da gehts einmal auf:

wiki.selfhtml.org/css

und gibst als Beispiel deinen "background" ein und lässt dort suchen. Einfach, verständlich und übersichtlich in kurzen Worten wird dir dort der jeweilige Befehl erklärt, und der Zusatznutzen mit weiteren Variablen, sofern man das benötigt. Da kannst du auch mit Hilfe der dortigen Suche Vergleiche anstellen zwischen den Codes.

Vg Roman
Zitieren
MarSch
Gast
 
#6
23.05.2015, 10:45
Das ist leider nicht so...
Zum einen bekomme ich ne "404" wenn ich deinen Link nehme aber habe trotzdem ja die "Suchmaske" oben rechts aber wenn ich dort "background" eingebe dann kommt nicht der "background-size" und wenn ich "background-size" eingebe bekomme ich einen Treffer zu einem Bug in Chrome aber nicht die Erklärung was der Befehal genau macht...
Zitieren
MarSch
Gast
 
#7
23.05.2015, 11:22
Ich habe jetzt mal die fetten Bereiche im HTML gelöscht und es funktioniert trotzdem auf Grund des fetten roten Codeteils, deshlab nur die Frage, mache ich etwas falsch was ich noch nicht sehe wenn ich die fetten schwarzen Bereiche lösche, sind sie wirklich über oder kommt der Rattenschwanz irgendwann?

<body style="height:1558px;background:#ffffff;
background-image: url(http://www.???.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
height:auto
/*Page Body Style*/">
Zitieren
Tschipiar Offline
Moderator
Beiträge: 647
Themen: 94
Danke erhalten: 20 in 15 Posts
Danke gesagt: 9
Registriert seit: 05.07.2014
#8
23.05.2015, 19:00
Salü Markus

MarSch schrieb:Wofür brauche ich "background-size:cover" wenn ich doch "height:auto" habe? Die erste "Height:1558" Angabe ist ja auch ausser Kraft gesetzt durch "height:auto" oder?
...

Das "height:auto;" am Ende hebt Dein oberes height:1558px wieder auf und bezieht sich nicht auf "background-size: cover" .
Du könntest einfacher 1558px durch auto ersetzen.
Mit "body {height:auto;}" wird erlaubt, alles automatisch "wachsen zu lassen", wenn der Inhalt höher als das Ansichtsfenster ist. kleine Demo
Zitieren
koter Offline
Profi Member
Beiträge: 1.443
Themen: 11
Danke erhalten: 278 in 236 Posts
Danke gesagt: 26
Registriert seit: 24.03.2012
#9
23.05.2015, 20:30
Hallo Markus,

ich habe „height:auto“ ans Ende gestellt um die von WebPlus vorgegebene Höhe aufzuheben. Die vorgegebene Höhe liegt in einem nicht editierbaren Bereich des Quelltextes:

[Bild: zwischenablage0164u37.jpg]

Man kann nur die weiß-unterlegten Stellen bearbeiten. Wenn man den Quelltext mit einem externen Editor bearbeitet, gehen die Änderungen nach dem Bearbeiten mit WebPlus verloren. Deshalb musste ich zu dieser Notlösung greifen.

Außerdem zeigt WebPlus viele Änderungen des Quelltextes nicht an. Die weitere Bearbeitung wird dann zu einem richtigen „Blindflug“. Die Beispielseite sieht in der Designansicht so aus:

[Bild: zwischenablage03exu34.jpg]

Serif macht gute Programme aber WebPlus ist (nach meiner Meinung) ziemlich misslungen.

Gruß

Koter
Zitieren
MarSch
Gast
 
#10
26.05.2015, 10:16
Hallo Koter,

verstehe, man kann nicht jeden nicht mehr benötigten HTML-Code löschen sondern wie in diesem Fall hast du eine Einstellung später im Code gemacht um das mit dem Backgroundbild zu erreichen...

Die in WebPlus gemachten Änderungen in HTML werden doch aber alle immer angezeigt solange sie im weissen Bereich passsieren, oder? Da kanns höchstens sein das WebPlus tewas nicht versteht und es deshalb nicht abbilded wie Rahmen oder ähnlich, oder? Ich würde gern diese PHP Kontaktformular einbringen aber dazu in dem anderen Threat den wir schreiben...

Danke erstmal hier in diesem Threat... Smile
Markus
Zitieren