Top-Themen

AppleEntwicklungHardwareInternetLinuxMicrosoftMultimediaNetzwerkeOff TopicSicherheitSonstige SystemeVirtualisierungWeiterbildungZusammenarbeit

Aktuelle Themen

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

Webseiten Hintergundbild über die ganze Seite, mit automatischer Anpassung an Auflösung, wie?

Frage Entwicklung Webentwicklung

Mitglied: wescraven07

wescraven07 (Level 2) - Jetzt verbinden

10.04.2012 um 20:58 Uhr, 4070 Aufrufe, 8 Kommentare

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.
Mitglied: MrNetman
10.04.2012 um 21:00 Uhr
es war die erste Antwort in Google:
self-html

Gruß
Netman
Bitte warten ..
Mitglied: wescraven07
10.04.2012 um 21:35 Uhr
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.
Bitte warten ..
Mitglied: Claclaq
10.04.2012 um 22:03 Uhr
Guten Abend

Meinst Du so was?

Gruss
CQ
Bitte warten ..
Mitglied: wescraven07
10.04.2012 um 22:23 Uhr
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...
Bitte warten ..
Mitglied: d4shoerncheN
11.04.2012 um 08:31 Uhr
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
01.
  
02.
/** 
03.
* Fullscreenr - lightweight full screen background jquery plugin 
04.
* By Jan Schneiders 
05.
* Version 1.0 
06.
* www.nanotux.com 
07.
**/ 
08.
(function($){	 
09.
	$.fn.fullscreenr = function(options) { 
10.
		if(options.height === undefined) alert('Please supply the background image height, default values will now be used. These may be very inaccurate.'); 
11.
		if(options.width === undefined) alert('Please supply the background image width, default values will now be used. These may be very inaccurate.'); 
12.
		if(options.bgID === undefined) alert('Please supply the background image ID, default #bgimg will now be used.'); 
13.
		var defaults = { width: 1280,  height: 1024, bgID: 'bgimg' }; 
14.
		var options = $.extend({}, defaults, options);  
15.
		$(document).ready(function() { $(options.bgID).fullscreenrResizer(options);	}); 
16.
		$(window).bind("resize", function() { $(options.bgID).fullscreenrResizer(options); });		 
17.
		return this; 		 
18.
	};	 
19.
	$.fn.fullscreenrResizer = function(options) { 
20.
		// Set bg size 
21.
		var ratio = options.height / options.width;	 
22.
		// Get browser window size 
23.
		var browserwidth = $(window).width(); 
24.
		var browserheight = $(window).height(); 
25.
		// Scale the image 
26.
		if ((browserheight/browserwidth) > ratio){ 
27.
		    $(this).height(browserheight); 
28.
		    $(this).width(browserheight / ratio); 
29.
		} else { 
30.
		    $(this).width(browserwidth); 
31.
		    $(this).height(browserwidth * ratio); 
32.
33.
		// Center the image 
34.
		$(this).css('left', (browserwidth - $(this).width())/2); 
35.
		$(this).css('top', (browserheight - $(this).height())/2); 
36.
		return this; 		 
37.
	}; 
38.
})(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//
Bitte warten ..
Mitglied: MrNetman
11.04.2012 um 11:19 Uhr
mein Monitor ist aber ein 1920er.
Und dann serve ich auch meist nicht im Vollbild.

weiter Anregungen um es perfekt zu machen.
Gruß
Netman
Bitte warten ..
Mitglied: wescraven07
14.04.2012 um 11:57 Uhr
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
Bitte warten ..
Mitglied: d4shoerncheN
18.04.2012 um 08:57 Uhr
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.
Bitte warten ..
Neuester Wissensbeitrag
Ähnliche Inhalte
Windows Tools
Automatischer FTP-Upload ohne angemeldeten Benutzer (5)

Frage von SarekHL zum Thema Windows Tools ...

RedHat, CentOS, Fedora
gelöst Erstellen von Desktopverknüpfungen und Anpassung der Taskleiste (2)

Frage von honeybee zum Thema RedHat, CentOS, Fedora ...

Backup
gelöst Datensicherung von Daten, auf denen die ganze Zeit gearbeitet wird (8)

Frage von Windows11 zum Thema Backup ...

HTML
Captive Portal login Seite (2)

Frage von gansa28 zum Thema HTML ...

Heiß diskutierte Inhalte
Windows Userverwaltung
Ausgeschiedene Mitarbeiter im Unternehmen - was tun mit den AD Konten? (33)

Frage von patz223 zum Thema Windows Userverwaltung ...

LAN, WAN, Wireless
FritzBox, zwei Server, verschiedene Netze (21)

Frage von DavidGl zum Thema LAN, WAN, Wireless ...

Viren und Trojaner
Aufgepasst: Neue Ransomware Goldeneye verbreitet sich rasant (20)

Link von Penny.Cilin zum Thema Viren und Trojaner ...

Windows Netzwerk
Windows 10 RDP geht nicht (18)

Frage von Fiasko zum Thema Windows Netzwerk ...