wescraven07
Goto Top

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.

Content-ID: 183336

Url: https://administrator.de/contentid/183336

Ausgedruckt am: 25.11.2024 um 18:11 Uhr

MrNetman
MrNetman 10.04.2012 um 21:00:43 Uhr
Goto Top
es war die erste Antwort in Google:
self-html

Gruß
Netman
wescraven07
wescraven07 10.04.2012 um 21:35:34 Uhr
Goto Top
ja, aber damit passt sich ja der Hintergund nicht an die entsprechende Auflösung an.

Es ist ja EIN Bild für den Gesamthintergund, also eine Grafik. Als Hintergund für die gesamte Seite funktioniert das ja nur, wenn das Bild eine entsprechende Auflösung hat, die muss sich dann entsprechend automatisch anpassen können, ebi anderer Auflösung.
Claclaq
Claclaq 10.04.2012 um 22:03:12 Uhr
Goto Top
Guten Abend

Meinst Du so was?

Gruss
CQ
wescraven07
wescraven07 10.04.2012 um 22:23:15 Uhr
Goto Top
würde ich schon sagen. Das ist ja auch ein Hintergundbild hinterlegt, dass bei z.B. meiner höchsten Auflösung 1680x1050 genauso angeziegt wird, wie bei 1440x990...


Und wie macht man sowas? Habe eben was gelesen, das man das mit CSS hinbekommt? Stimmt das? ich würde das geren versuchen, mit einem kompltten Hintergundbild, dass ich in Auflösung 1680x1050 hinterlege, das a statisch bleibt, wenn ich den Textinhalt runterscrolle und dass sich automatisch anpasst, wenn jemand Auflösung 1024x768 eingestellt hat...
d4shoerncheN
d4shoerncheN 11.04.2012 um 08:31:43 Uhr
Goto Top
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
 
/**
* 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//
MrNetman
MrNetman 11.04.2012 um 11:19:26 Uhr
Goto Top
mein Monitor ist aber ein 1920er.
Und dann serve ich auch meist nicht im Vollbild.

weiter Anregungen um es perfekt zu machen.
Gruß
Netman
wescraven07
wescraven07 14.04.2012 um 11:57:10 Uhr
Goto Top
ja, hatte mir den Link nicht genau durchgelesen, ich werde das mal so versuchen.

Aber wenn wir schon dabei sind, mal gelich noch eine Know-How Frage:

Wie realisert man denn so eine Fusszeile, wie bei dieser Webseite in orange ganz unten :

http://dominic-multerer.de/marketeer
d4shoerncheN
d4shoerncheN 18.04.2012 um 08:57:23 Uhr
Goto Top
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.