# Webseiten Hintergrundbild austauschen



## Neuling09 (25. September 2009)

Hallo zusammen,

ich bin zwar in Sachen HTML & CSS recht fit, allerdings habe ich von JavaScript noch nicht so den Plan! 

Mein Vorhaben.
Ich möchte eine Webseite erstellen, bei der die Hintergrundbilder alle 10 Sekunden wechseln. Ich habe insgesamt 6 Bilder. Die Bilder sollen die grösse der ganzen Webseite haben und es müsste möglich sein, 1-2 div's über die ganze Geschichte zu legen.

Ich habe hier mal eine Beispielseite für Euch: http://easybistro.com/

Gibt es da vielleicht fertige Scripts die man einbauen kann oder hat jemande andere Tipps? Über Hilfe wäre ich mehr als dankbar!


----------



## Sven Mintel (25. September 2009)

Moin,



Neuling09 hat gesagt.:


> Die Bilder sollen die grösse der ganzen Webseite haben



Könntest du dies bitte näher erläutern?
Die Bilder sind ja irgendwo gespeichert, haben also eine fixe Grösse.
Was soll also bei verschiedenen Auflösungen mit den Bildern passieren?

Kacheln, Strecken, Beschneiden?


----------



## Neuling09 (25. September 2009)

Nun ja. Die Bilder haben 1500 x 1100 Pixel als Abmaße. Ich wollte sie über CSS zentriert positionieren. Im Endeffekt kommen die Bilder in einen div Container rein. Die Bilder sollen dann einfach wechseln, wie in der Beispielseite.


----------



## Sven Mintel (25. September 2009)

Soll dies nun heissen, dass die Bilder beschnitten angezeigt werden sollen, wenn der Anzeigebereich kleiner ist als die Bilder?


----------



## Neuling09 (25. September 2009)

Ja genau. So sollte es später sein.


----------



## Sven Mintel (25. September 2009)

Soetwas geht mit Javascript:
	
	
	



```
<script type="text/javascript">
<!--
var bg=[
        'pfad/zu/bild1.jpg',
        'pfad/zu/bild2.jpg',
        'pfad/zu/bild3.jpg'
       ];

window.setInterval(
                  function()
                  {
                    img=bg.shift();bg.push(img);
                    document.getElementsByTagName('body')[0].style.backgroundImage
                      ='url('+img+')';
                  },
                  10000);
                  
//-->
</script>
```

bei bg gibst du die Pfade zu den Bildern an. Die 10000 ist der Millisekunden-Wert für den Interval. Das tauscht das Hintergrundbild im <body> aus.
Wenn es stattdessen ein anderes Element sein soll musst du statt:

```
document.getElementsByTagName('body')[0]
```
einen Zeiger auf das gewünschte Objekt notieren, bspw. per getElementById.

Die sonstige Formatierung kannst du per CSS vornehmen:

```
background-position:center;
  background-repeat: no-repeat;
```


----------



## Neuling09 (25. September 2009)

Vielen Dank für die schnelle Hilfe! Ich werde es gleich mal ausprobieren.


----------



## Neuling09 (25. September 2009)

Das sieht wirklich verdammt schick aus! 

Gibt es jetzt vielleicht noch die Möglichkeit die Bilder nicht so apruppt wechseln zu lassen, sprich mit einem 'Fade Effekt' zu verschönern?


----------



## Maik (26. September 2009)

Hi,

mit Suchbegriffen wie "Fade", "FadeIn", oder "Fade-Effekt" lassen sich hier im JS-Forum diverse Script-Beispiele aufstöbern.

Oder du schaust dir beispielsweise die "Fading"-Effects des JS-Frameworks  jQuery an.

mfg Maik


----------



## a_is (1. Februar 2014)

Hallo,

ich verwende das oben angefuehrte skript. funktioniert!

Kann ich es dahingehend modifizieren, dass das Hintergrundbild zentriert und "ungekachelt" gezeigt wird? 

Ich habe versucht: 

='url('+img+') no-repeat'; 

Geht leider nicht.


----------



## abuzze (1. Februar 2014)

a_is hat gesagt.:


> Ich habe versucht:
> 
> ='url('+img+') no-repeat';


Da müsstest du auch die style-property ändern:

```
document.getElementsByTagName('body')[0].style.background
                      ='url('+img+') center center no-repeat';
```

Du kannst das Skript auch lassen wie es ist, und background-position/repeat per CSS setzen:


```
<style type="text/css">
 body
 {
  background-repeat:no-repeat;
  background-position:center center;
 }
</style>
```


----------

