Specyficzne projekty wymagają specyficznych rozwiązań. Jednym z nich jest konieczność uzyskania obrazkowego tła strony na całym ekranie, niezależnie od rozdzielczości ekranu.
Z pomocą przychodzi HTML5, a właściwie CANVAS (którego możliwości sprawdzaliśmy np. tutaj: [canvas] Gradient HSV – pełen zakres kolorów
Schemat działania jest następujący:
1. Tworzymy element CANVAS
2. Wczytujemy grafikę/obrazek, który chcemy umieścić jako tło strony
3. Importujemy grafikę do elementu CANVAS, nadając mu wymiary ekranu
4. Exportujemy element CANVAS do elementuw sekcję: background-image.
W pierwszej kolejności tworzymy element CANVAS (np. na końcu strony, zaraz przed </body>):
<canvas id="canvas" style="display:none;"></canvas>
W JavaScript wczytujemy utworzony CANVAS oraz obrazek tła strony (bg.jpg). Po jego załadowaniu skalujemy go do wymiarów ekranu (screen.width, screen.height), przypisując do CANVAS (drawImage). Na koniec exportujemy otrzymany obrazek jako tło strony (document.body.style.backgroundImage), do czego najłatwiej wykorzystać funkcję “toDataURL“, która zamieni obraz do postaci binarnej (data:image/jpeg;base64,…).
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var img = new Image();
img.onload = function(){
can.width = screen.width; // pobieramy szerokość ekranu
can.height = screen.height; // pobieramy wysokość ekranu
ctx.drawImage(img, 0, 0, can.width, can.height);
document.body.style.backgroundImage = 'url('+can.toDataURL('image/jpeg')+')';
}
img.src = 'bg.jpg'; // wczytanie grafiki
Gotowy kod całościowo:
<html>
<style type="text/css">
body{ background: white no-repeat; }
</style>
<body>
Full screen background image: <br> <img src="bg.jpg">
<canvas id="canvas" style="display:none;"></canvas>
<script type="text/javascript">
var can = document.getElementById('canvas');
var ctx = can.getContext('2d');
var img = new Image();
img.onload = function(){
can.width = screen.width; // pobieramy szerokość ekranu
can.height = screen.height; // pobieramy wysokość ekranu
ctx.drawImage(img, 0, 0, can.width, can.height);
document.body.style.backgroundImage = 'url('+can.toDataURL('image/jpeg')+')';
}
img.src = 'bg.jpg'; // wczytanie grafiki
</script>
</body>
</html>
