Top-Themen

Aktuelle Themen (A bis Z)

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, 4196 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 ..
Ähnliche Inhalte
Windows 7
Empfohlende Auflösung automatisch einstellen
gelöst Frage von timg1993Windows 77 Kommentare

Hallo, wir haben an unserem Standort ca. 1000 Rechner mit den unterschiedlichsten Monitoren. In unserem standardisierten Image, ist eine ...

Utilities
Automatisch Webseiten im Wechsel anzeigen
gelöst Frage von DeepThoughtUtilities2 Kommentare

Hallo, nachdem der Versuch mit Android gescheitert ist, muss ich nun mehrere Google-Analytics Webseiten im Wechsel auf einem Windows7 ...

HTML
Automatisches Login-Skript für Webseite
Frage von JagoZhHTML4 Kommentare

Hallo zusammen, ich weiss, das Thema wurde schon öfter diskutiert, dennoch gelingt es mir nicht, mich via eigenem html-Code ...

Webentwicklung
Anpassung htaccess
Frage von KlausIngeWebentwicklung10 Kommentare

Hallo, ich habe hier eine htaccess Datei. Diese sorgt dafür, das die domain www.abc.de/xyz angezeigt wird aber intern index.php?plugin=xyz ...

Neue Wissensbeiträge
Datenschutz

Weitere Inforamtionen zum Sicherheitsproblem BeA

Information von Penny.Cilin vor 14 MinutenDatenschutz

Im folgenden ein weiterer Bericht über die Sicherheitsprobleme von Bea. Fataler Konstruktionsfehler im besonderen elektronischen Anwaltspostfach Gruss Penny

Windows 10

Systemdienste behalten nach Win10 inplace-Upgrade nicht die ggf. modifizierte Startart bei

Tipp von DerWoWusste vor 1 StundeWindows 103 Kommentare

Stellt Euch vor, Ihr habt ein Win10 System und modifiziert dort die Startart von Systemdiensten. Zum Beispiel wollt Ihr ...

Microsoft Office

Deaktivieren von Startbildschirm und Backstage-Ansicht in Office 2016 per Batch-Datei

Anleitung von SarekHL vor 4 StundenMicrosoft Office17 Kommentare

Guten Morgen zusammen! Ich habe mir gestern (auch mit Hilfe dieses Boards) ein Script gebastelt, um in Office 2016 ...

Erkennung und -Abwehr

Sicherheitslücke Spectre und Meltdown: Status prüfen

Anleitung von Frank vor 10 StundenErkennung und -Abwehr2 Kommentare

Nach all den Updates der letzten Woche sollte man unbedingt auch den Status prüfen, ob die Sicherheitslücken Spectre, Meltdown ...

Heiß diskutierte Inhalte
Netzwerke
NTFS-Berechtigung
Frage von Daoudi1973Netzwerke23 Kommentare

Hallo zusammen und frohes neues Jahr (Sorry, ich bin spät dran) Meine Frage: 1- Ich habe einen Ordner im ...

Microsoft Office
Deaktivieren von Startbildschirm und Backstage-Ansicht in Office 2016 per Batch-Datei
Anleitung von SarekHLMicrosoft Office17 Kommentare

Guten Morgen zusammen! Ich habe mir gestern (auch mit Hilfe dieses Boards) ein Script gebastelt, um in Office 2016 ...

Drucker und Scanner
Gesucht DIN A3 Drucker
Frage von NebellichtDrucker und Scanner15 Kommentare

Hallo, ich möchte einen neuen DIN A3 Drucker kaufen. Um ab und zu, ca. 1 mal die Woche Farbausdrucke ...

E-Business
Bankgeheimnis abgeschafft - wie kann ich mich wehren?
Frage von honeybeeE-Business13 Kommentare

Hallo, ich nehme Bezug auf diesen Artikel: Als ich das gelesen habe, wurde mir schlecht Es geht ja niemanden ...