Ergebnis 1 bis 6 von 6

Thema: CSS

  1. #1
    Gast

    Standard CSS

    Hallo ich habe noch nen Problem ich will nen hintergrundbild mit css einfügen wie schaffe ich es dass das bild immer 100% der seite füllt??



    body
    {margin-top: 0px; margin-left: 0px; margin-right: 0px;margin-bottom: 0px; color: #e6e6e6; background-image:url(hintergrund.jpg ); font-family: verdana,arial; font-size: 9pt;}


    so ist es in der css datei.
    und ich will dass das hintergrund.jpg in der höhe und in der breite das ganze browser fenster ausfüllt.das bild soll nicht wenn es kleiner ist als das browserfenster nebeneinander erscheinen
    Kapiert???
    ich hoffe mal.
    Bitte helft mir
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Kaiserliche Hoheit
    Registriert seit
    22.02.2005
    Beiträge
    1.558
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Hintergrundbilder in CSS können nicht skaliert werden. Anders als Bilder in HTML-Elementen wird immer die tatsächliche Größe der Grafikdatei angezeigt.
    "Carpe Diem" powered by positiv Feelings

  3. #3
    Gast

    Standard

    wie könnte man es dann mit html machen??

  4. #4
    Kaiserliche Hoheit
    Registriert seit
    22.02.2005
    Beiträge
    1.558
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Gar nicht. Denn HTML kennt keine Hintergrundgrafiken, sondern nur Inhalt von Elementen. Zudem ist die Frage eher so zu stellen:
    Was soll erreicht werden?
    "Carpe Diem" powered by positiv Feelings

  5. #5
    Kaiserliche Hoheit
    Registriert seit
    15.07.2005
    Ort
    Hagen (NRW)
    Beiträge
    1.515
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Du könntest das Bild mithilfe eines <div> und z-index in den Hintergrund bringen, innerhalb des <div> das Bild per img anzeigen und auf 100% skalieren.

    Darüber legst du dann den Inhalt deiner Seite - mal so als Lösungsvorschlag
    Zoggerforum.de Betreuer * Mod @ ibforen.de * Admin @ daoc-ds.de
    ICQ Nummer kann via PN erfragt werden

  6. #6
    Keine Lust auf Login
    Gast

    Standard

    Mit einem kleinen Trick und einer nicht ganz 100% logischen Auszeichnung ist es relativ leicht den Anschein eines "sich skalierendes Hintergrundbildes" zu erwecken.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    		"http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    	
    <html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="en" lang="en">
    <head>
    	<title>Skaliertes Hintergrundbild</title>
    	<style type="text/css" media="screen">
    	*&#123;
    	margin&#58;0px;
    	padding&#58;0px; 
    	&#125;
    	html,body&#123;
    	width&#58;100%;
    	height&#58;100%;
    	&#125;
    	#bg&#123;
    	width&#58;100%;
    	height&#58;100%;   
    	position&#58;absolute;  
    	z-index&#58;1;
    	display&#58;block !important;
    	&#125;
    	#seiteninhalt&#123;
    	position&#58;absolute;  
    	z-index&#58;2;
    	&#125;
    	</style>
    </head> 
    <body>
    [img]P1010006.JPG[/img]
    <div id="seiteninhalt">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla lacus orci, tincidunt sit amet, posuere eu, pellentesque vel, elit. Etiam lectus velit, dapibus vitae, dignissim ac, sollicitudin vitae, ipsum. Maecenas et velit. Suspendisse ut turpis et nibh mattis congue. Fusce erat sapien, tincidunt non, tincidunt ac, aliquam ac, arcu. Nullam eget erat eget elit dignissim malesuada. Proin non quam quis ipsum vehicula ultricies. Fusce libero sapien, hendrerit tempor, sagittis sit amet, venenatis eget, lorem. Mauris iaculis diam quis leo. Maecenas sed nibh. Aenean libero sapien, aliquet eget, bibendum eu, mollis vitae, lorem. Sed auctor, mi et sagittis consequat, lorem magna dictum neque, eu pretium dolor dui ac risus. Sed sed magna. In vestibulum. Cras enim libero, hendrerit quis, blandit id, consectetuer at, justo. Suspendisse cursus iaculis mi. Morbi nisl urna, ultrices nec, pellentesque ac, aliquam eu, odio. Donec sapien mi, cursus at, viverra eget, rutrum sed, diam. Integer rutrum quam et augue.
    </div>
    </body>
    </html>
    Das läuft folgendermaßen ab:
    Das Bild wird per img-Tag und leerem alt-Attribut als Designmittel ausgezeichnet. Das Bild wird mit position:absolute; an die richtige Stelle gesetzt und durch das setzen von width und height auf 100% wird der Anschein einer Skalierung erweckt.
    Sollte der Stylesheet aus irgendwelchen Gründen nicht geladen werden können, wird das Bild durch display:none; nicht angezeigt.

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •