Webseiten Hintergundbild über die ganze Seite, mit automatischer Anpassung an Auflösung, wie?
Hallo Leude habe folgende Frage:
habe kürzlich eine Seite gesehen, die ein Hintergundbild hatte, das über die gesamte Seite ging. Also in der Mitte Textinhalt variable nach unten scrollbar. Das Hintergrundbild statisch. Und auf der Seite stand, dass sich das Hintergundbild automatisch an die unterscheidlichen Auflösungen anpasst.
Wie funktioniert das, wenn man ein komplettes Bild und nicht einzelne Grafikschnipsel über den gesamten Background hinterlegt? Vor Allem, weil das Bild einen Verlauf von der Mitte zu den äusseren Rändern hat.
habe kürzlich eine Seite gesehen, die ein Hintergundbild hatte, das über die gesamte Seite ging. Also in der Mitte Textinhalt variable nach unten scrollbar. Das Hintergrundbild statisch. Und auf der Seite stand, dass sich das Hintergundbild automatisch an die unterscheidlichen Auflösungen anpasst.
Wie funktioniert das, wenn man ein komplettes Bild und nicht einzelne Grafikschnipsel über den gesamten Background hinterlegt? Vor Allem, weil das Bild einen Verlauf von der Mitte zu den äusseren Rändern hat.
Bitte markiere auch die Kommentare, die zur Lösung des Beitrags beigetragen haben
Content-ID: 183336
Url: https://administrator.de/contentid/183336
Ausgedruckt am: 25.11.2024 um 18:11 Uhr
8 Kommentare
Neuester Kommentar
Guten Morgen,
hast du dir den Link von Clasclaq auch durchgelesen?
Dort steht doch wie es funktioniert.
Du erstellst eine Javascript-Datei (.js) mit folgendem Inhalt
Wobei darauf zu achten ist, dass du oben die ORIGINALWERTE des Bildes einmalig einträgst. Auf deiner "index.html" fügst du dann im "head" dein Script wie folgt ein:
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fullscreenr.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
You need to specify the size of your background image here (could be done automatically by some PHP code)
var FullscreenrOptions = { width: 1024, height: 683, bgID: '#bgimg' };
This will activate the full screen background!
jQuery.fn.fullscreenr(FullscreenrOptions);
-->
</script>
Deine Image-Datei gibst du dann im <body> wie folgt mit ein:
<img id="bgimg" src="img/bg.jpg" />
Lieben Gruß
P.S.: Tut mir Leid, leider hat er nur einmal die Code-Formatierung angenommen, danach hatte er nur Fehlformatierungen der anderen beiden erstellt.
Der Quellcode sämtlicher Dateien stammt vom Ersteller des Tutorials.http://matthiasschuetz.com/jquery-fullscreenr-bilder-auf-fenstergroesse ... . Vielen Dank dafür//
hast du dir den Link von Clasclaq auch durchgelesen?
Dort steht doch wie es funktioniert.
Du erstellst eine Javascript-Datei (.js) mit folgendem Inhalt
/**
* Fullscreenr - lightweight full screen background jquery plugin
* By Jan Schneiders
* Version 1.0
* www.nanotux.com
**/
(function($){
$.fn.fullscreenr = function(options) {
if(options.height === undefined) alert('Please supply the background image height, default values will now be used. These may be very inaccurate.');
if(options.width === undefined) alert('Please supply the background image width, default values will now be used. These may be very inaccurate.');
if(options.bgID === undefined) alert('Please supply the background image ID, default #bgimg will now be used.');
var defaults = { width: 1280, height: 1024, bgID: 'bgimg' };
var options = $.extend({}, defaults, options);
$(document).ready(function() { $(options.bgID).fullscreenrResizer(options); });
$(window).bind("resize", function() { $(options.bgID).fullscreenrResizer(options); });
return this;
};
$.fn.fullscreenrResizer = function(options) {
// Set bg size
var ratio = options.height / options.width;
// Get browser window size
var browserwidth = $(window).width();
var browserheight = $(window).height();
// Scale the image
if ((browserheight/browserwidth) > ratio){
$(this).height(browserheight);
$(this).width(browserheight / ratio);
} else {
$(this).width(browserwidth);
$(this).height(browserwidth * ratio);
}
// Center the image
$(this).css('left', (browserwidth - $(this).width())/2);
$(this).css('top', (browserheight - $(this).height())/2);
return this;
};
})(jQuery);
Wobei darauf zu achten ist, dass du oben die ORIGINALWERTE des Bildes einmalig einträgst. Auf deiner "index.html" fügst du dann im "head" dein Script wie folgt ein:
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.fullscreenr.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
You need to specify the size of your background image here (could be done automatically by some PHP code)
var FullscreenrOptions = { width: 1024, height: 683, bgID: '#bgimg' };
This will activate the full screen background!
jQuery.fn.fullscreenr(FullscreenrOptions);
-->
</script>
Deine Image-Datei gibst du dann im <body> wie folgt mit ein:
<img id="bgimg" src="img/bg.jpg" />
Lieben Gruß
P.S.: Tut mir Leid, leider hat er nur einmal die Code-Formatierung angenommen, danach hatte er nur Fehlformatierungen der anderen beiden erstellt.
Der Quellcode sämtlicher Dateien stammt vom Ersteller des Tutorials.http://matthiasschuetz.com/jquery-fullscreenr-bilder-auf-fenstergroesse ... . Vielen Dank dafür//
Guten Morgen,
mach dich am Besten mal im Internet schlau über HTML und CSS. Gibt es genügend Tutorials, die dir dabei helfen. Generell ist es einfach zu realisieren. Erstellst eine .html-Datei und fügst dieser DIV-Container zu. Was in diesen DIV's dargestellt wird (Formatierungen wie Hintergrund, Größe etc.) weist du in der dazugehörigen CSS-Datei zu.
Mit den Stichwörtern wirst du sicherlich fündig.
mach dich am Besten mal im Internet schlau über HTML und CSS. Gibt es genügend Tutorials, die dir dabei helfen. Generell ist es einfach zu realisieren. Erstellst eine .html-Datei und fügst dieser DIV-Container zu. Was in diesen DIV's dargestellt wird (Formatierungen wie Hintergrund, Größe etc.) weist du in der dazugehörigen CSS-Datei zu.
Mit den Stichwörtern wirst du sicherlich fündig.