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

Per CSS Bild im Hintergrund immer an genaue Browserbreite skalieren

Frage Entwicklung CSS

Mitglied: peterha

peterha (Level 1) - Jetzt verbinden

24.10.2011 um 21:36 Uhr, 5588 Aufrufe, 7 Kommentare

hey folks,

ich habe ne website mit nem hintergrund bild, das per css rein kommt. Ziel ist es das hintergrundbild automatisch an die browser auflösung anzupassen, sodass nur ein bild für alle auflösungen verwendet werden kann.

Hier der Code

01.
 
02.
body { 
03.
	background-image: url(../images/body_bg.jpg); 
04.
	background-repeat: repeat-x; 
05.
	background-color: #000000; 
06.
	margin-top:0px; 
07.
	margin-bottom:0px; 
08.
 

Weiß jemand von euch mehr mit dem CSS gefrickel anzufangen?

Bin für jede rückmeldung dankbar.

schönen Abend
PETER!
Mitglied: StefanKittel
24.10.2011 um 21:49 Uhr
Hallo,
warum nicht im Body?
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" background="Bottom_texture.jpg">

Stefan
Bitte warten ..
Mitglied: peterha
24.10.2011 um 21:56 Uhr
hey Stefan,

weil im body an der stelle noch ein bild drüber liegt... bzw mal video mal flash

vg
Christoph
Bitte warten ..
Mitglied: StefanKittel
24.10.2011 um 22:01 Uhr
Hallo,
das mit der Breite ist ein Problem, da HTML, CSS oder PHP ja gar nicht wissen wie groß Dein Monitor ist.
Geht eigentlich nur mit Skripten (soweit ich weiß).
Stefan

http://www.php.de/php-tipps-2005/11578-aufloesung-mittels-php-erkennen- ...
Bitte warten ..
Mitglied: Claclaq
24.10.2011 um 22:14 Uhr
Hallo Peter

Es stimmt schon, was Stefan sagt. Mit Javascript (jQuery) kommst Du aber sicher weiter: Schau Dir mal hier die Demo an.

LG CQ
Bitte warten ..
Mitglied: peterha
25.10.2011 um 08:26 Uhr
hey leute,

guten morgen!

schaut mal was ich gefunden habe:

So solls sein:
http://benwildner.de/demo/automatic-scaling-background-css/
hier das how to:
http://benwildner.de/2010/01/how-to-hintergrund-browserfullend-skaliere ...

Mein Problem: Ich habe den CSS Code in mein CSS kopiert, es zeigt aber keinerlei wirkung. weiß jemand von euch wie es mit meinem obigen code kombiniert werden könnte?

danke für jede rückmeldung!
Peter
Bitte warten ..
Mitglied: peterha
25.10.2011 um 20:33 Uhr
anybody? ) per mir final hilft bekommt nen 10er für ne tafel schokolade per paypal.
Bitte warten ..
Mitglied: Naderio
11.11.2011 um 11:05 Uhr
hmm...ich hoffe das ist ein Ansatz:

im Quellcode das Bild platzieren:

01.
<div id="stretch"> 
02.
<img id="hintergrund" src="images/bild.jpg" /> 
03.
</div>
Dann im CSS:
01.
img[id="hintergrund"] { 
02.
   width: 100%; 
03.
   height: 100%; 
04.
05.
div[id="stretch"] { 
06.
   position: fixed;  
07.
   top: 0; 
08.
   right: 0; 
09.
   bottom: 0; 
10.
   left: 0; 
11.
}
Natürlich muss das Bild im z-index ganz hinten liegen, oder im HTML konstrukt seperat liegen.



Das war jetzt nur so eine Idee, das Bild streckt sich so nun immer auf Browserfenstergröße. Hoffe das Hilft dir


MfG

Naderio - Thomas G.

EDIT:

Habs nochmal überarbeitet. Jetzt funktioniert es.
Bitte warten ..
Ähnliche Inhalte
HTML
HTML, CSS: Mapping auf dynamischen Hintergrund (2)

Frage von Judo99 zum Thema HTML ...

Microsoft
Freeware Bild Viewer f. Unternehmen (6)

Frage von firewood2015 zum Thema Microsoft ...

Entwicklung
Seite automatisch wieder ausrichten mit css oder javascript? (2)

Frage von rababar2014 zum Thema Entwicklung ...

CSS
CSS Background-image erscheint einfach nicht (3)

Frage von MyApps2GO.de zum Thema CSS ...

Neue Wissensbeiträge
Google Android

Cyanogenmod alternative Downloadquelle

(5)

Tipp von Lochkartenstanzer zum Thema Google Android ...

Batch & Shell

Batch als Dienst bei Systemstart ohne Anmeldung ausführen

(5)

Tipp von tralveller zum Thema Batch & Shell ...

Sicherheits-Tools

Sicherheitstest von Passwörtern für ganze DB-Tabellen

(1)

Tipp von gdconsult zum Thema Sicherheits-Tools ...

Heiß diskutierte Inhalte
Windows Server
gelöst Exchange HyperV Prozessorlast (19)

Frage von theoberlin zum Thema Windows Server ...

Windows Server
Server mit Netzwerkaussetzern (18)

Frage von SarekHL zum Thema Windows Server ...

Server-Hardware
gelöst SPP von HP Abwärtskompatibel? (14)

Frage von fireskyer zum Thema Server-Hardware ...

Netzwerke
Vorschlag Hotelverkabelung (14)

Frage von FA-jka zum Thema Netzwerke ...