Wenn Sie nach einer Möglichkeit suchen, ein VOLLSTÄNDIGES HINTERGRUNDBILD zu erstellen, gehen Sie hierhin.
Mein Freund Richard kam kürzlich mit einer einfachen CSS-Frage zu mir
Gibt es eine Möglichkeit, ein Hintergrundbild größenveränderbar zu machen? Das heißt, den Hintergrund einer Webseite randlos mit einem Bild auszufüllen, unabhängig von der Größe des Browserfensters. Außerdem soll es sich beim Ändern des Browserfensters größer oder kleiner skalieren. Außerdem soll es sein Seitenverhältnis beibehalten (sich nicht seltsam strecken). Außerdem sollen keine Scrollbalken entstehen, sondern vertikal abgeschnitten werden, wenn nötig. Außerdem soll es als Inline- <img>-Tag auf der Seite erscheinen.
Wow, das ist eine hohe Anforderung. Mein erster Gedanke war... äh, nein. Aber natürlich ist das genau die Art von Herausforderung, die ich genieße, also machte ich mich ans Nachdenken. Letztendlich fand ich eine ziemlich gute Lösung und wir machten daraus ein ziemlich nettes kleines Projekt. Schauen Sie sich zuerst das fertige Projekt an, dann zeige ich Ihnen, wie es gemacht wurde.
Fertiges Projekt: Wie ist das Wetter? Offline
Probieren Sie es aus und ändern Sie die Größe Ihres Browserfensters und bemerken Sie, wie sich das Bild anpasst. Es geschieht nicht "on the fly", aber es funktioniert. Es erfüllt auch alle anderen Anforderungen: keine Scrollbalken und beibehält das Pixelverhältnis.
Erster Versuch
Nun, mein erster Gedanke war, dass dies wirklich ein CSS-Hintergrundbild sein muss. Dies füllt den Bildschirm randlos aus, wenn das Bild groß genug ist. Es kann auch zentriert werden, daher dachte ich, dies wäre gut genug. Große Browserfenster zeigen mehr vom Bild und kleinere weniger. Wenn es auf das Body-Tag angewendet wird, füllt dies den Bildschirm gut aus, ohne Scrollbalken. Ziemlich gute Lösung, dachte ich, auch wenn es technisch nicht größenveränderbar ist, da man die Größe eines CSS-Hintergrundbilds nicht festlegen kann. Hier ist, wie ich bei diesem ersten Ansatz vorgegangen bin.
<head>
....
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("img.source-image").hide();
var $source = $("img.source-image").attr("src");
$('#page-body').css({
'backgroundImage': 'url(' + $source +')',
'backgroundRepeat': 'no-repeat',
'backgroundPosition': 'top center'
});
});
</script>
</head>
<body id="page-body">
<img class="source-image" src="images/image.jpg" alt="" />
</body>Sie haben es erraten, jQuery. Der obige Code blendet das Bild auf der Seite aus, schnappt sich aber sein "src"-Attribut und wendet es als Hintergrund auf das Body-Element an (über seine eindeutige ID "page-body"). Schauen Sie sich ein Beispiel dafür in Aktion an.
Zweiter Versuch (besser)
Während der erste Versuch gute Arbeit geleistet hat, hat er auf grundlegendster Ebene versagt: Er war nicht "größenveränderbar". Also Zeit für eine weitere Runde. Um die Größe eines auf dem Bildschirm angezeigten Bildes zu steuern, ohne die Datei selbst zu verändern, muss es mit dem <img>-Tag inline angezeigt werden. Mit dem img-Tag können wir "width"- und "height"-Attribute festlegen, um die Bildgröße zu steuern. Wenn wir die genaue Pixelbreite des Browserfensters erhalten können, können wir diese Zahl im width-Attribut des Bildes verwenden und seine Größe steuern, während das Verhältnis beibehalten wird.
Wir können erneut jQuery und das dimensions plugin verwenden, um die Breite unseres Browserfensters zu ermitteln. Dann verwenden wir diese Zahl, um das width-Attribut des Bildes festzulegen, dem wir einen eindeutigen Klassennamen "source-image" geben. Wir müssen dies tun, sobald der DOM bereit ist, damit es geschieht, bevor das Bild überhaupt zu laden beginnt. Wir können dies auch (FTW) jederzeit tun, wenn das Fenster resized wird. Hier ist, wie es funktioniert.
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.dimensions.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $winwidth = $(window).width();
$("img.source-image").attr({
width: $winwidth
});
$(window).bind("resize", function(){
var $winwidth = $(window).width();
$("img.source-image").attr({
width: $winwidth
});
});
});
</script>Damit dieses Inline-Bild sich mehr wie ein Hintergrundbild verhält, können wir diese eindeutige Klasse, die wir angewendet haben, verwenden, um eine absolute Positionierung vorzunehmen.
img.source-image {
position: absolute;
top: 0;
left: 0;
}Aufgrund dieser absoluten Positionierung muss alles, was Sie darüber legen möchten, ebenfalls eine Positionierung und einen höheren z-index-Wert haben. Wenn Ihr Quellbild besonders hoch ist oder Ihr Browserfenster besonders breit ist, kann das Bild leicht höher als Ihr Browserfenster werden und einen vertikalen Scrollbalken erzwingen. Um dies zu verhindern, setzen Sie einfach den overflow-Wert auf Ihrem body auf hidden.
body {
overflow: hidden;
}Dritter Versuch (am besten)
Vergessen Sie diese JavaScript-Sache! Dank Anders' Kommentar, der auf Stu Nicholls Version hinwies, hier ist ein noch besserer Weg, dies ohne jegliches JavaScript zu handhaben!
Da wir bereits eine eindeutige Klasse auf dem Bild haben, das Bild absolut positioniert ist und das Scrollbalkenproblem bereits gelöst ist, lassen Sie uns einfach die Breite mit einem Prozentsatz direkt in CSS festlegen.
#img.source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}Sehen Sie eine Demo davon in Aktion. Dies ist die bisher beste Lösung, da die Größenänderung "on the fly" für ein schönes flüssiges Gefühl erfolgt und keinerlei JavaScript erfordert.
Mehr über WhatsTheWeather.net
Ich habe nur das einfache Design für Wie ist das Wetter gemacht (Update Nov 2013: jetzt offline), aber Richard hat die ganze coole Programmierung gemacht, damit es funktioniert. Soweit ich weiß, ist es eine Kette von 3 verschiedenen APIs. Zuerst holt es Ihre IP-Adresse und wandelt sie über eine API in eine Stadt und einen Bundesstaat um. Dann verwendet es eine Wetter-API, um das aktuelle Wetter zu ermitteln. Dann verwendet es die Flickr-API, um ein zufälliges Bild mit Tags zu finden, die dem Wetter entsprechen. Wenn es Ihre Postleitzahl nicht abrufen kann, wird es Sie danach fragen, wie auf dem iPhone (was es auch automatisch erkennt und etwas anders handhabt). Alles gemacht mit Ruby on Rails. Ziemlich schicke Tanzerei!
Gute Sache!
"What's The Weather" hat den hässlichen blauen Bild-Rand in IE6, ich glaube, es fehlt nur der border="0" Tag?
Coole Sache!
Hier ist übrigens eine reine CSS-Implementierung desselben.
Ups, ich habe etwas vergessen: http://www.cssplay.co.uk/layouts/background.html
Danke Anders! Ich habe den Artikel aktualisiert, um auch diese Lösung aufzunehmen, die für mich die beste bisher ist.
Beaverton, das sieht man nie im Web. Wo bist du also, Portland oder Wisconsin?
@Jay: Ich bin jetzt in Portland. Ziemlich lahm, dass meine IP auf den Fuchs auflöst =P
What's the Weather? hat einen kleinen JavaScript-Fehler
haha ist nicht definiert
Die Zeile lautet
var $winwidth = $(window).width();haha
Wow, ich mag diese Seite wirklich, Chris, gute Arbeit. Ich bin gerade über den Fluss, ich kann nicht glauben, dass es verdammt noch mal 35 Grad sind! Verrücktes Wetter!
PS... Liebe den CSS-Tricks-Footer!
@NA: Danke fürs Bemerken. Sieht aus wie ein zufälliger Tippfehler... habe ihn behoben.
@Jake: Kein Scherz, Mann. Heute ist es heiß!
Ziemlich cool! Allerdings solltest du eine Möglichkeit einbauen, zu prüfen, ob das Fenster höher als das Bild ist, um es erneut zu skalieren und den weißen Raum zu entfernen, der unter einigen von ihnen erscheint. Ich denke, das bedeutet, eine Höhenattribut in Pixeln festzulegen und dann etwas Mathematik anzuwenden, um die Breite zu berechnen und ein konstantes Verhältnis beizubehalten.
Der Effekt ist trotzdem ziemlich nett.
Brillant.
Einfach.
Elegant. Im wahren Sinne des Wortes. Ich hatte vor einiger Zeit nach etwas wie diesem gesucht, bin aber darauf zurückgefallen, ein größeres Bild zu verwenden und overflow: hidden zu verwenden, um die Struktur der Seite (wenn auch nicht das ganze Bild) zu erhalten.
Vielen Dank.
Wahrscheinlich nicht wichtig für Ihre Wetterseiten, aber das Festlegen von overflow: hidden; im Body kann Probleme in Firefox verursachen, wenn Sie eine Seite drucken möchten, die länger als ein Blatt Papier ist. Da der Inhalt das Blatt überlappt, wird nur das erste Blatt gedruckt. Das zweite Blatt wird wahrscheinlich eine Zeile mehr enthalten, aber der Rest wird leer sein.
Das sollte man bei der Verwendung von overflow: hidden; auf großen Blockelementen (nicht nur auf dem Body) beachten.
Sander,
Danke für den Hinweis. Wir sind uns dessen bewusst und suchen nach einer Lösung (bisher ohne Erfolg).
Mit freundlichen Grüßen,
Karl
Sie sollten sicherstellen, dass das Verhältnis des Bildes mindestens 4:3 beträgt, um unnötigen Leerraum unter dem Bild zu vermeiden... und stellen Sie sicher, dass nichts Wichtiges fehlt, wenn der untere Teil des Bildes abgeschnitten wird :)
Ich liebe eigentlich das Skript, das das Wetter abruft... Ich suche so etwas für WotUThink.com.
Ich habe so etwas auf meiner temporären Splashpage, während ich meine Arbeit sortiere, es ist nur ein großes, CSS-zentriertes Bild, das ziemlich denselben Effekt hat.
hängt davon ab, wo der Fokuspunkt in deinem Bild liegt.
ich habe ersetzt
oben:0;
mit
unten:0;
Danke für das kleine Tutorial.
Was ist also mit IE6? Es ist Mist, dass die Leute immer noch diesen absolut schrecklichen Browser benutzen, aber ich habe einen Kunden, der ein dynamisches Hintergrundbild benötigt, das sich skaliert, und auch Besucher hat, die immer noch IE6 benutzen. IE < 6 macht glücklicherweise weniger als ein Prozent der Besucher aus, also muss ich mich nicht um diesen Browser kümmern.
Fantastisch.
Eine Sache bei whatstheweather... könnten Sie erkennen, welche Länder Celsius/Metrisch verwenden (wie hier in Australien) und die Temperaturinformationen entsprechend ändern, anstatt Imperial (Standard)? Es hat meine Stadt richtig erkannt (Perth, WA), aber das Wetter ist gerade nicht "leicht bewölkt" (es sind Gewitter und Hagel), und Fahrenheit bedeutet mir nichts. Sobald Sie erkennen, ob die Stadt in einem metrischen Land liegt, könnten Sie einen kleinen Umrechnungsbetrag von dem Fahrenheit-Wert in Metrisch durchführen.
Wie auch immer, ich liebe den Proof of Concept. Ich denke aber, es wird noch eine Weile dauern, bis wir alle ausreichend gute Internetgeschwindigkeiten haben, um ihn nutzen zu können.
Hallo,
Tolle Technik! Ich habe mich gefragt, ob es eine Möglichkeit gäbe, so etwas auf einen Block oder eine Spalte anzuwenden?
Vielen Dank
Oh Chris, ich suche schon so lange nach dir. Ich baue eine Seite in DW mit gezeichneten Bildern in PS. Ich möchte sie als Hintergrund für jede Seite verwenden und sie sollen eng auf der Seite sitzen, genau wie bei "The Weather", es funktioniert einfach nicht anders. Schwierig ist, dass ich kein vollständiger Code-Kenner bin und nicht verstehe, ob du die ersten drei Codes eliminiert und dich für den letzten entschieden hast? Wie bekomme ich das in DW, über die Seiteneigenschaften? Ich habe versucht, in PS auf jede erdenkliche Weise zu skalieren, aber es ist alles Raten und entweder zu groß und beginnt zu kacheln oder zu klein mit einem weißen Rand. Ich bin so verzweifelt, weiterzumachen und verstehe nicht, wenn du in Code sprichst. Würde mich sehr über Hilfe freuen. Danke Vicky.
Hallo Chris, danke für den Code. Ich habe das tatsächlich zum Laufen gebracht, wenn auch mit einem weißen Rand. Ich muss wohl jetzt das Bild skalieren, damit es auf die Seite passt. Ich habe das Seiten-Dimensionen-Plugin heruntergeladen, aber ich kämpfe damit, es zu verstehen. Ich muss einfach weitermachen.
Danke Vicky.
Hallo!!
Ist es möglich, diesen Effekt in einem WordPress-Theme zu erzielen? Ich habe es versucht, aber es funktioniert nicht für mich...
Danke!
Chris,
Ihre Seite ist erstaunlich und hat mir immens geholfen - nicht nur um herauszufinden, wie man Dinge tut, sondern auch um zu sehen, welche Arten von Dingen in einem Browserfenster möglich sind, an die ich nie gedacht hätte. Ich brauche dringend Ihre Hilfe in Bezug auf ein größenveränderbares Hintergrundbild - hoffentlich sehen Sie diesen Kommentar.
Die Lösung, die Sie hier gefunden haben, ist großartig, aber ich suche nach etwas mehr proportionaler Berücksichtigung - das bedeutet, ich möchte, dass das Hintergrundbild proportional skaliert, wie Sie es hier tun, aber dann aufhört zu skalieren, wenn der Benutzer das Fenster so zerquetscht, dass es viel länger als breit ist. Wenn ein Benutzer dies mit der hier in diesem Beitrag vorgeschlagenen Lösung tut, erhalten Sie einen weißen Raum unter dem Bild, den ich nicht möchte. Hier ist eine Flash-Seite, die genau das tut, was ich will (obwohl der Hintergrund Video anstelle eines statischen Bildes ist).
http://www.gudrungudrun.com/#/women/womenSpring/
Sehen Sie, wie sich der Hintergrund skaliert, aber bei einem bestimmten Breiten/Höhen-Verhältnis aufhört zu skalieren, sodass das Bild das Fenster weiterhin ausfüllt? Ich glaube, diese Funktion ist in einer JavaScript-Datei namens "swfforcesize.js" enthalten, aber ich bin nicht schlau genug im alten JavaScript, um zu analysieren, was dort tatsächlich vor sich geht.
Haben Sie eine Idee, wie man das für einen Nicht-Flash-Hintergrund replizieren kann? Jede Hilfe, die Sie anbieten könnten, würde enorm geschätzt werden.
Danke. Nochmals, Ihre Seite rockt.
Ich denke, die Antwort liegt oben in einer Art Abwandlung von #2. Anstatt nur die Breite des Bildes auf die Breite des Browserfensters einzustellen, stellen Sie es auf die längere Seite von beiden (Breite oder Höhe) ein. So ist die Breite immer die längere und erzeugt nie diesen weißen Raum.
Danke, ich werde es ausprobieren!
Danke fürs Teilen, sehr nützlich für mich.
Vielleicht probiere ich die JavaScript-Implementierung.
Können wir bitte etwas Klärung zu diesem Thema erhalten. Keine dieser Beispiele funktioniert vollständig. Viele gute Diskussionen über die Probleme. Ich hoffe, jemand hat eine JS-Lösung dafür.
Ich würde auch gerne ein Codebeispiel oder die Variation zu #2 sehen, die weißen Raum verhindert, wenn das Fenster so resized wird, dass Breite > Höhe.
Ich würde das gerne auf myspace zum Laufen bringen. Ich weiß, dass sie keine JavaScripts erlauben, nicht einmal einen <.head>.
Können einige dieser Codes in myspace funktionieren?
Das funktioniert für die Breite, wie bemerkt, aber es benötigt immer noch die proportionale Erkennung und Anpassung für die Höhe, wie Chris Coyier bemerkte. CSS kann diese Dinge wahrscheinlich nicht erkennen, weshalb man wirklich eine JavaScript-Lösung benötigt, um all das zu handhaben.
Hat jemand eine Implementierung gemacht, die das Breiten- ODER Höhenproblem (Proportion) löst?
Ich habe eine weitere Lösung für einen Freund eines Freundes mit einem größenveränderbaren Hintergrundbild gemacht, siehe diesen Link
Ich suche schon seit Ewigkeiten nach einer Lösung, bei der sich das Hintergrundbild vergrößert und die Proportionen beibehält. Aber ich habe keine Lösung gefunden, bei der das Bild den gesamten Bildschirm ausfüllt, wenn man es auch in der Höhe vergrößert.
Wenn jemand eine Idee hat...?
Hallo Nathalie,
Die Lösung, nach der Sie suchen, ist meiner Meinung nach Flash.
Cheers Thomas
Hallo Thomas!
Nun, Flash, JavaScript, CSS, HTML - es ist mir eigentlich egal - ich habe zuerst hauptsächlich nach Flash-Codes gesucht - aber ich habe keine zufriedenstellenden Lösungen gefunden. Deshalb habe ich angefangen, nach JavaScript und CSS zu suchen...
Haben Sie eine Idee, wie man das mit Flash lösen kann?
Prost.
nath
Danke, ich werde es ausprobieren!
Nathalie, hast du meinen Post vom 5. Nov. gesehen? Ist das etwas, das du in CSS, XHTML suchst?
Sie müssen den richtigen Doctype verwenden, um das mit IE richtig hinzubekommen. Ich weiß, dass IE 6 und SP 2 (XP) nicht gut funktionieren. IE 6 ist mir ziemlich egal.
Liebe Apple ;-)
Ich brauchte das für eine Website, die ich entwickle, und habe diese Lösung gefunden. Sie ist ziemlich einfaches CSS. Sie erlaubt dem Bild, sich in der Breite zu skalieren, aber die Proportionen des Bildes beizubehalten.
Jedenfalls kam ich hierher, um nach Ideen zu suchen, wie man das macht, also dachte ich, ich gebe diese Methode für jemand anderen ab.
Hallo J. Ich bin neu hier, aber deine Bildskalierung sieht cool aus. Ich habe nach einer Methode gesucht, wie man das macht, nachdem ich die "go to china"-Seite gesehen habe. Deine sieht dem sehr ähnlich. Wie hast du das gemacht und in welchem Programm?
Hallo J, das funktioniert wirklich gut. Ich nehme an, das wurde als Hintergrundbild eingefügt? Wie hast du die richtige Größe deines Browserfensters ermittelt? Ich habe auch Links auf meiner Startseite und muss die Links zusammen mit allem anderen skalieren lassen. Irgendwelche Ideen. Mit Dank Victoria.
Danke, ich werde es ausprobieren.
Hallo,
Ich glaube, ich habe das gleiche Problem wie Victoria. Ich kenne etwas Code, brauche aber Hilfe, um zu wissen, was ich ändern muss. Jedes Mal, wenn ich versuche, das Bild zu dem zu machen, das ich möchte, wird das neue Bild nur zum Hintergrund und ändert nicht die Größe.
Ich denke, das ist, was alle suchen (abgesehen vom Slideshow-Teil davon).
http://www.adultswim.com/shows/index.html
Leider kann ich nicht sagen, wie sie das machen.
@Tom
Ich auch. Wenn jemand herausfindet, wie die Skalierung von Adult Swim funktioniert, lassen Sie es uns wissen? Ich poste es, wenn ich es herausfinde.
Äh, wie es funktioniert*, meine ich.
Es ist definitiv die eleganteste Skalierungslösung, die ich gesehen habe. Habe alle JS-Dateien durchsucht, die ich finden konnte, aber sie bezogen sich alle auf die Slideshow. Keine Hinweise zur Skalierung bisher. Leider bin ich immer noch ein JavaScript-N00b.
Ja, es ist sehr interessant. Aber die Seite mit langem Inhalt scrollt nicht, es gibt keinen Scrollbalken auf Ihrer Seite.
Sie können den Inhalt hier scrollen http://www.fiskebussen.se oder die Seite
Persönlich finde ich, dass das hier eine wirklich schöne Lösung ist... keine Ahnung, wie es gemacht wird... zu schade... http://www.koeweidenpostma.com
Nathalie, das ist nett, aber off-topic - diese Lösung ist vollständig Flash - es gibt kein CSS daran.
Hat jemand weitere Fortschritte gemacht? Ich habe mit der Einstellung des Bildes auf eine Mindestbreite experimentiert, damit es bis zu einem bestimmten Punkt skaliert und dann gleich bleibt... aber äh... das hat nicht funktioniert.
Ich versuche, das Hintergrundbild zu skalieren, ohne einen Teil davon abzuschneiden. (kein overflow:hidden) Das können wir sicher mit height:100% machen.
Ich habe Probleme bei der Anwendung desselben auf einen bestimmten Bereich und das Bild wird entweder gestreckt oder komprimiert.
Irgendwelche Hinweise?
Oh je :-( Habe gerade kürzlich dasselbe Thema behandelt: http://www.younic.de/scaling-body-background-images-with-pure-css Aber naja, wer zuerst kommt, mahlt zuerst ;-)
Ich habe mich gefragt, ob Sie sich http://www.treemendousplantworks.com/style.html ansehen würden.
Ich arbeite an einer Website für Freunde, die eine tabellenbasierte Website hatten. Ich bin kein CSS-Guru, ganz und gar nicht, und habe Ihr Tutorial zur Kenntnis genommen, wie man den Hintergrund der Website mit JavaScript anpassen lässt. Allerdings habe ich Schwierigkeiten, meinen Footer so zu platzieren, dass er am Ende der Seite steht. Können Sie diese Seite mit Firebug überprüfen und mir sagen, ob Sie eine Lösung für dieses Problem vorschlagen können.
Alles, was Sie tun können, wird sehr geschätzt.
Re
Chris Coyer
Ich würde es so machen
.bg {
bottom: 0;
left: 0;
position: fixed;
width: 100%;
z-index: 5000;
}
-Chris
https://css-tricks.de
Hallo Chris,
Das schien eine gute Lösung zu sein, aber sie hat nicht funktioniert. Irgendwie ist es jetzt komplett von der Seite weg. Wenn ich das Fenster minimiere und die Größe ändere, kann ich sehen, dass es immer noch auf der Seite ist, aber nicht im Fußbereich. Verursacht etwas in meinem Footer-CSS diese Diskrepanz?
Danke für die Hilfe!
Groundswell
Hallo Chris-
Ich versuche, Ihren Code zu modifizieren, damit das Bild immer das gesamte Fenster ausfüllt. Ich mache mir keine Sorgen, dass das Fenster das Bild zuschneidet, ich möchte einfach keinen weißen Bereich sehen.
Die Logik, von der ich ausgehe, ist diese
die Größe des Bildes an die Fensterbreite anpassen
prüfen, ob die Bildhöhe > der Fensterhöhe ist
wenn ja, die Bildbreite auf die Fensterbreite setzen
wenn nicht, die Bildhöhe auf die Fensterhöhe setzen
Scheint das vernünftig zu sein? Der andere Teil ist, dass ich nicht sicher bin, wie ich das mit jsQuery implementieren soll. Könnten Sie mir dabei helfen?
Ich habe es geschafft, das zu tun, aber ich habe das Bild nicht als Hintergrundbild platziert. Ich habe es in eine Ebene gelegt, die fast so groß ist wie das Browserfenster. Dann habe ich die Hintergrundfarbe auf die gleiche Farbe wie die Hintergrundfarbe des Bildes gesetzt. Dadurch werden weiße Ränder vermieden. Victoria.
Ich bin mir nicht ganz sicher, wie die Bildproportionen beibehalten werden; ich stelle mir vor, es geschieht einfach durch das Setzen der Bildbreite in dieser Zeile
$("img.source-image").attr({
width: $winwidth
Ist das der Fall?
Never mind. Habe den Footer herausgefunden. Es war doch im Footer-Tag. Danke für Ihre Hilfe Chris! Cheers!
~Groundswell
Chris,
Ich wollte Ihnen nur für die Inspiration in diesem Artikel danken. Ich habe das gesehen und angefangen, an einer jQuery-Lösung zu arbeiten. Dieser Artikel hat mir sehr geholfen, damit anzufangen. Ich bin ein großer Fan des Blogs, nochmals vielen Dank.
Hier ist meine Lösung (browserkompatibel), es ist ein jQuery-Plugin namens Supersized –
http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/
Das hat für mich sehr gut funktioniert, ich habe mir die Haare ausgerauft deswegen. Danke Chris!
Ich würde empfehlen, den
z-indexauf-1zu setzen, damit der Body über dem Bild liegen kann (wie hier)Der Link "Whats the weather" führt zu einer Spam-Seite! Bitte entfernen Sie den Link vollständig.
Moment mal. Ist es ein Hintergrundbild oder nur ein Bild? Ich weiß, wie man ein größenveränderbares Bild in ein Div einfügt, aber ich möchte ein größenveränderbares *Hintergrund*bild. Ein Hintergrundbild wird über CSS geladen, und der Vorteil der Verwendung eines Hintergrundbildes ist, dass es die Ladezeit der Seite nicht beeinträchtigt. Daher die Notwendigkeit eines größenveränderbaren Hintergrundbildes. Ich denke, dieses Tutorial lehrt nur, wie man ein Bild durch HTML in ein Div einfügt und dann das Bild *durch CSS gestylt*. Ein echtes Hintergrundbild muss wie folgt in das Dokument geladen werden
Verstehe ich dieses Tutorial falsch?
Vielen Dank für jedes Feedback. Ich möchte wirklich Hilfe beim Erstellen eines größenveränderbaren Hintergrundbildes.
Ich habe dies als CSS-only-Möglichkeit genutzt, ein Retina-Bild als Logo auf Magento zu verwenden. Scheint auf Retina- und Nicht-Retina-Geräten gut zu funktionieren! Vielen Dank!
phtml
css
.header .logo {
width: 289px;
height: 75px;
position: relative;
display: block;
}
.header-center a.logo img {width: 100%;
position: absolute;
top: 0;
left: 0;
}
Würden nicht 2 einfache CSS-Zeilen ausreichen?