Hintergrundbild strecken?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aufrufen
bestimmtes hintergrundbild
code
differenzierung
eigenschaft
ewige abfragen
funktion
http
image
nachteil
passendes bild
position
recht genial danke
safari
sparen
strecke
trick
url
vergessen
verzichten
-
Gibt es eine Möglichkeit, das Hintergrundbild auf Bildschirmformat zu strecken?
oder muss ich ein Bild in mehreren Formaten speichern und dann mit einem script ein passendes Bild auswählen? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
ja, gibt es.
In css mit background-size,
Schau mal dafür hier.
In Javascript gehe das zwar auch aber komplizierter... . Am besten versuchst du es mal so und schaust ob alles klappt
.
-
Kurze Ergänzung zu Antwort von master4860:
Wenns was ist, was auch im IE7 / IE8 laufen muss, müsstest du zusätzlich noch nach einem Polyfill (zB diesen hier: https://github.com/louisremi/background-size-polyfill) dafür suchen (siehe: http://caniuse.com/background-img-opts).
LG
dgnw -
Danke, ich werde mal versuchen ob ich das so hinkriege
-
Moin,
die einfachts Lösung ist jene von master4860,
allerings darfst du dabei nicht die browserspezifischen "Eigenschaften" vergessen.
Example:
body { background:url(body.jpeg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
Es ist aber in möglich allein Mit CSS (Level3!) je nach Auflösung ein bestimmtes Hintergrundbild zu laden.
Example:
@media screen and (min-width:1024px) { body {background: url(background1024.jpg);} } @media screen and (min-width:800px) and (max-width:1023px) { body {background: url(background800-1023.jpg} }
Die Media Queries haben jedoch den Nachteil dass diese dennoch alle
Files übermitteln was doch auf die Performance geht.
Handelt es sich um Backgrounds die nicht allzu Groß (KB) sind,
kann man diese Lösung durchaus verwenden.
Eine andere Option wäre PHP, dieses ganze Javascriptgeunke kannst du vergessen
da es doch "Surfer" gibt die gerne auf JS verzichten und so wird das Script dann auch
nicht Clientseitig ausgeführt.
Der Nachteil in PHP ist jedoch dass du in erster Linie nur zwischen mobielen und den klassischen Endgeräten
unterscheiden kannst.
Wenn es jedoch um die Differenzierung für mobile Endgeräte geht ist es sogar sehr sinnvoll,
da du dann einen passenden Stylesheet ausgeben kannst.
Example:
if(strstr($_SERVER['HTTP_USER_AGENT'], 'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'], 'Android') || strstr($_SERVER['HTTP_USER_AGENT'], 'BlackBerry')) { echo '<link rel="stylesheet" type="text/css" href="mobile.css" />'; } else { echo '<link rel="stylesheet" type="text/css" href="desktop.css" />'; }
MfG
Beitrag zuletzt geändert: 24.2.2014 17:09:11 von seven-sign -
Also die Function hab ich als Anfänger gestern mal geschrieben und die sollte,solang dein backgroundimage nicht auf position:fixed; ist auch auf den wirken. Hoffe das hilft dir iwie...die 16 kannst du ändern um auf die gewünschte Seitenbreite zu kommen und die 10 ganz unten z.b. auf 100 damit er nicht so oft abfragt...aber wenn du dein Browserfenster dann resized...spielt das schön mit der Site zusammen :)
<head> <script language="javascript> function toggleZoomScreen() { var x=window.innerWidth; var zoom = (x/16)+"%"; document.body.style.zoom=zoom; setTimeout(function(){toggleZoomScreen()},10); } </script> </head> <body onload="toggleZoomScreen"> </body>
-
lucasgeorg schrieb:
<head> <script language="javascript> function toggleZoomScreen() { var x=window.innerWidth; var zoom = (x/16)+"%"; document.body.style.zoom=zoom; setTimeout(function(){toggleZoomScreen()},10); } </script> </head> <body onload="toggleZoomScreen"> </body>
Wenn du es so machst...
...müsstest du dir auch das ewige Abfragen mit setTimeout sparen können und die Funktion nur dann aufrufen, wenn die Fenstergröße auch wirklich geändert wird.<head> function toggleZoomScreen() { var x=window.innerWidth; var zoom = (x/16)+"%"; document.body.style.zoom=zoom; } toggleZoomScreen(); </head> <body onresize="toggleZoomScreen()"> ... </body> -
Also ich empfehle:
html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
Dann hast du den Hintergrund über die ganze Seite.
Quelle: http://css-tricks.com/perfect-full-page-background-image/ -
Das wäre eine Lösung:
div.bg_size {
-moz-background-size:50% 25%; /* Firefox */
-webkit-background-size:50% 25%; /* Safari, Chrome */
background-size:50% 25%; /* Opera, IE, W3C Standard */
} -
djglycerin schrieb:
Wenn du es so machst...
...müsstest du dir auch das ewige Abfragen mit setTimeout sparen können und die Funktion nur dann aufrufen, wenn die Fenstergröße auch wirklich geändert wird.<head> function toggleZoomScreen() { var x=window.innerWidth; var zoom = (x/16)+"%"; document.body.style.zoom=zoom; } toggleZoomScreen(); </head> <body onresize="toggleZoomScreen()"> ... </body>
Nice das resize event war mir als Anfänger neu und natürlich hast du Recht genial DANKE! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
