Mehrere Backroundgrößen

08.01.2014 15:34
avatar  Tanja84
#1 Mehrere Backroundgrößen
Ta
Mitglied

Halli Hallo,

ich melde mich auch mal zu Wort :)
Brauche leider (oder zum Glück) jetzt auch mal Hilfe von euch :)

Und zwar, die User in meinem Forum haben teilweise andere Bildschirmauflösungen als ich. Ich habe z.B. 1920 x 1080. Andere wiederum kleiner. Problem ist dann das, dass das Forum bzw. BG zu groß ist.

Was kann man da machen?
Über CSS Funtion bzw. Html mehrere Codes schreiben, so dass es für jede Bildschirmauflösung angepasst wird, also automatisch?
Wie hier:

ar bg= "http://img842.imageshack.us/img842/5666/1920x1080s.png";

if(screen.width < 801) bg="http://img843.imageshack.us/img843/1940/800x600f.png";
else if(screen.width < 1025) bg="http://img827.imageshack.us/img827/3527/1024x768t.png";
else if(screen.width < 1281) bg="http://img713.imageshack.us/img713/1180/1280x960.png";
else if(screen.width < 1441) bg="http://img833.imageshack.us/img833/5889/1440x1080.png";
else if(screen.width < 1601) bg="http://img716.imageshack.us/img716/7483/1600x1200.png";

document.body.style.backgroundImage="url("+bg+")";

Den Code hatte ich mir mal damals erstellt wo anders verwendet gehabt. Kann ich das hier auch machen?

Würde mich wahnsinnig über Hilfe und Antworten freuen.

LG


 Antworten

 Beitrag melden
08.01.2014 18:04
avatar  Olaf
#2 RE: Mehrere Backroundgrößen
Ol
Mitglied

Das sieht schon sehr gut aus.Ich hätte aber noch das Hintergrundbild festgesetzt,das es nicht mitscrollt.

1
2
3
4
5
6
7
8
9
10
11
12
 
<script>
var bg= "http://img842.imageshack.us/img842/5666/1920x1080s.png";
if(screen.width < 801) bg="http://img843.imageshack.us/img843/1940/800x600f.png";
else if(screen.width < 1025) bg="http://img827.imageshack.us/img827/3527/1024x768t.png";
else if(screen.width < 1281) bg="http://img713.imageshack.us/img713/1180/1280x960.png";
else if(screen.width < 1441) bg="http://img833.imageshack.us/img833/5889/1440x1080.png";
else if(screen.width < 1601) bg="http://img716.imageshack.us/img716/7483/1600x1200.png";
document.body.style.backgroundImage = "url("+bg+")";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundAttachment = "fixed";
</script>
 
 


Das kannst Du dann in der " Kopfzeile" im Adminmenü einsetzen.

Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

 Antworten

 Beitrag melden
08.01.2014 18:14 (zuletzt bearbeitet: 08.01.2014 18:16)
avatar  spectro ( gelöscht )
#3 RE: Mehrere Backroundgrößen
sp
spectro ( gelöscht )

Ist es per CSS nicht einfacher?

1
2
3
4
5
6
7
8
 
body {
background-image:url(http://img842.imageshack.us/img842/5666/1920x1080s.png) !important;
background-position: center !important;
background-size:100% auto;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
}
 
 


 Antworten

 Beitrag melden
08.01.2014 18:25
avatar  Olaf
#4 RE: Mehrere Backroundgrößen
Ol
Mitglied

Zitat von spectro im Beitrag #3
Ist es per CSS nicht einfacher?

1
2
3
4
5
6
7
8
 
body {
background-image:url(http://img842.imageshack.us/img842/5666/1920x1080s.png) !important;
background-position: center !important;
background-size:100% auto;
background-attachment: fixed !important;
background-repeat: no-repeat !important;
}
 
 





Das ist Richtig.
Das Javascript passt aber das Hintergrundbild nach der Bildschirmauflösung automatisch an.

Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

 Antworten

 Beitrag melden
08.01.2014 18:29 (zuletzt bearbeitet: 08.01.2014 18:31)
avatar  spectro ( gelöscht )
#5 RE: Mehrere Backroundgrößen
sp
spectro ( gelöscht )

Na automatisch ist doch gut oder nicht

Ist die Frage ob das Script bei einem Smartphone das Hintergrundbild richtig anzeigt.


 Antworten

 Beitrag melden
08.01.2014 18:38
avatar  Tanja84
#6 RE: Mehrere Backroundgrößen
Ta
Mitglied

So erst mal vielen vielen Dank. Bin schon wahnsinnig geworden, weil nichts gehen wollte :)
Daher vielen Dank an euch alle :)
Smartphone is nich so schlimm, ist nur für laptop und pc Nutzer wichtig :)

Ich freu mich wahnsinnig über eure Hilfe :)


 Antworten

 Beitrag melden
08.01.2014 20:33
#7 RE: Mehrere Backroundgrößen
avatar
Mitglied

@Olaf
müssten die Abfragen nicht umgekehrt ablaufen?

Vereinfacht hast du es so geschrieben:
kleiner als 10 - dann Bild 1
kleiner als 100 - dann Bild 2
kleiner als 1000 - dann Bild 3

Wenn meine Auflösung nun 5 beträgt, dann Bild1
Ist aber auch kleiner als 100 - also Bild 2
usw.
Als letztes wird dann immer Bild 3 geladen.

Bei verschachtelten Excelformeln oder VBA wäre es jedenfalls so (meine ich jedenfalls ;-) ).
Ist das bei der Scriptsprache anders?
Werden die folgenden "else if" übersprungen wenn eine vorherige zutrifft?

Gruß
Frank


Boardnr. 621181

www.aquariumzimmer.de
Boardnr. 572886
Business Template

 Antworten

 Beitrag melden
08.01.2014 22:44
avatar  Olaf
#8 RE: Mehrere Backroundgrößen
Ol
Mitglied

Zitat von eini1971 im Beitrag #7

Werden die folgenden "else if" übersprungen wenn eine vorherige zutrifft?


Genauso ist es.
Trifft eine "if" Bedingung zu, so wird der "else" Zweig nicht mehr ausgeführt.Trifft eine "if" Bedingung nicht zu,sowird dafür der "else" Zweig ausgeführt.


Gruß
Olaf

__________________________

http://138600.homepagemodules.de/

 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!