Anzeige

Hintergrund Gestreckt

Hintergrund Gestreckt | PSD-Tutorials.de

Erstellt von manuj170793, 22.01.2008.

  1. manuj170793

    manuj170793 Noch nicht viel geschrieben

    Dabei seit:
    01.07.2007
    Beiträge:
    11
    Geschlecht:
    männlich
    Hintergrund Gestreckt
    Hallo, habe eine Frage.
    Wie ist es möglich Hintergrundbilder
    (also:
    Code (Text):
    1. <html>
    2. <body background="bild.jpg">
    3. </body>
    4. </html>
    )

    gestreckt darzustellen? Also wenn ich ein Bild wähle, das kleiner ist als der Browser ist, wird das Bild so oft nebeneinander bzw. untereinander gemacht, bis die Fläche gefüllt ist. Also wie kann man die Option "width="100%" und height="100%" für das Hintergrundbild vornehmen?

    MfG Manu
     
    #1      
  2. Wishu

    Wishu Noch nicht viel geschrieben

    Dabei seit:
    22.08.2007
    Beiträge:
    4
    Geschlecht:
    männlich
    Hintergrund Gestreckt
    AW: Hintergrund Gestreckt

    Das ist leider noch nicht möglich. Ich hoffe, dass es in CSS3 kommt, aber derzeit ist es noch nicht möglich..
    Im Allgemeinen sollte man <body background=""> nicht mehr benutzen. Das wird alles über CSS geregelt.

    Gruß
    Wishu
     
    #2      
  3. Duffman15

    Duffman15 Nicht mehr ganz neu hier

    Dabei seit:
    09.04.2007
    Beiträge:
    108
    Geschlecht:
    männlich
    Ort:
    Bayern
    Software:
    Photoshop CS3, Dreamweaver CS3, FLash CS3
    Kameratyp:
    Canon PowerShot A75
    Hintergrund Gestreckt
    AW: Hintergrund Gestreckt

    Naja, du kannst es höchstens mit
    Code (Text):
    1.  
    2. body {
    3. background-image:url(bild.gif);
    4. background-repeat:no-repeat;
    5. }
    6.  
    einzeln darstellen lassen und mit background-position positionieren! Aber wie mein Vorposter schon sagte, ist gestreckt darstellen leider noch nicht möglich!
     
    Zuletzt bearbeitet: 22.01.2008
    #3      
  4. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    Hintergrund Gestreckt
    #4      
  5. Wishu

    Wishu Noch nicht viel geschrieben

    Dabei seit:
    22.08.2007
    Beiträge:
    4
    Geschlecht:
    männlich
    Hintergrund Gestreckt
    AW: Hintergrund Gestreckt

    Ob es damit wirklich gestreckt wird, kann ich nicht sagen, kleiner wird es auf jeden Fall. Da das Bild aber 1280x1024 ist und meiner Auflösung ebenfalls, wird es nur kleiner, größer kann ich nicht probieren.

    Gruß
    Wishu
     
    #5      
  6. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    Hintergrund Gestreckt
    AW: Hintergrund Gestreckt

    Du bist aber auch der Klugschieter vor dem Herrn oder was? Deine Bildschirmauflösung ist 1280x1024, das heißt noch lange nicht, dass ein Bild was auch so groß ist in deinem Browserfenster auch so angezeigt wird... sei's drum extra für dich hab ich das Bild jetzt mal in 800x600 hochgeladen... damit du es auch erkennen kannst...

    whaa.de - Hintergrund mit 100%

    P.S. Die Variante ist allerdings nur suboptimal, da gestreckte Bilder immer bißchen komisch aussehen ;) und absolute Positionierung nicht so wirklich barrierefrei... na ja.. wumpe whaa
     
    #6      
  7. TheTalesOfImmo

    TheTalesOfImmo Medieninformatiker

    Dabei seit:
    20.01.2008
    Beiträge:
    47
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Adobe CC, Netbeans, Gehirn
    Kameratyp:
    Canon EOS 450D
    Hintergrund Gestreckt
    AW: Hintergrund Gestreckt

    *hüstel*

    HTML:
    1. <img src="anpassung.jpg" width="100%" height="100%" border="0" alt="">
    Das ist zwar möglich, aber nicht mehr wirklich Zeit gemäß, ich würde eher empfehlen, das Bild so zu slicen ("zerstückeln") dass man es mit den CSS-Attributen "repeat:repeat-x" bzw. "repeat:repeat-y" anordnen kann, spart ausserdem noch Bandbreite, aber wie gesagt, wie o.g. gehts auch.
     
    #7      
  8. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    Hintergrund Gestreckt
    AW: Hintergrund Gestreckt

    Die Frage war nicht, ob irgendwas zeitgemäß ist, sondern wie man einen Hintergrund zum Strecken bringt...


    und auch mit deinen zeitgemäßen repeat:repeat-y x (wo steht überhaupt, dass die zeitgemäß sind? was ist zeitgemäß?) kriegst du es nicht hin, dass der Hintergrund sich streckt... sprich das Bild sich der Größe des Browserfensters anpasst...


    ...und zeitgemäß? dann komm mir doch nicht mit Bandbreite ;) modem? wie unkuhl whaa? *feix
     
    #8      
  9. TheTalesOfImmo

    TheTalesOfImmo Medieninformatiker

    Dabei seit:
    20.01.2008
    Beiträge:
    47
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Adobe CC, Netbeans, Gehirn
    Kameratyp:
    Canon EOS 450D
    Hintergrund Gestreckt
    AW: Hintergrund Gestreckt

    dann bin ich halt unkuhl :D

    mit meinem repeat-x/y kann man Bilder nit strecken, aber man kann wenn mans geschickt anstellt so machen, dasses so aussieht, ausserdem hats den Vorteil dass sich nicht alles verschiebt.

    Ich red eig davon, dass die von Dir genannten HTML-Attribute im "modernen" X-HTML nen Validierungsfehler verursachen ;)

    Ansonsten hab ich Dir was den Weg betrifft ja zugestimmt^^
     
    #9      
  10. manuj170793

    manuj170793 Noch nicht viel geschrieben

    Dabei seit:
    01.07.2007
    Beiträge:
    11
    Geschlecht:
    männlich
    Hintergrund Gestreckt
    AW: Hintergrund Gestreckt

    ?zusammenfassung: es ist nicht möglich?

    hab ich das richtig verstanden
     
    #10      
  11. TheTalesOfImmo

    TheTalesOfImmo Medieninformatiker

    Dabei seit:
    20.01.2008
    Beiträge:
    47
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Adobe CC, Netbeans, Gehirn
    Kameratyp:
    Canon EOS 450D
    Hintergrund Gestreckt
    AW: Hintergrund Gestreckt

    Doch es ist, wie Herr_D bereits gesagt hat, mit:

    HTML:
    1. <img src="DeinBild.jpg" width="100%" height="100%" border="0" alt="NameDeinesBildes">
     
    #11      
  12. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    Hintergrund Gestreckt
    AW: Hintergrund Gestreckt



    Nein es ist nicht möglich das Hintergrundbild zu zerren...


    Mit der Seite die ich angebe wende ich einen anderen Trick an...


    Ich arbeite mit Ebenen auf der untersten Ebene ist ein Bild eingebunden, mit jeweils 100% Höhe und Breite (nicht als Hintergrundbild sondern ganz normal)

    Über z-index lege ich jetzt eine 2. Ebene (wie Folie) über die Bildebene...



    Code (Text):
    1.  
    2. <!doctype html public "-//W3C//DTD HTML 4.0 //EN">
    3. <html>
    4. <head>
    5. <title>whaa.de - Hintergrund mit 100%</title>
    6. <meta name="author" content="R.D">
    7. <meta name="generator" content="Ulli Meybohms HTML EDITOR">
    8. <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
    9.  
    10. <style type="text/css">
    11. <!--
    12. html { height: 100%; *overflow:hidden; }
    13. body
    14. {
    15.        background-color: #7A8073;
    16.        height: 100%;
    17.        margin:0;
    18.        font-size: 100.01%;
    19.  
    20. }
    21.  
    22.  
    23. [COLOR="DarkGreen"]#vollesBrett {
    24.         position:absolute;
    25.         top:0;
    26.         left:0;
    27.         height: 100%;
    28.         width:100%;
    29.         z-index:1;
    30.         overflow:hidden;
    31.         }
    32. #vollesBrett img {
    33.         width:100%;
    34.         height:100%;
    35.         border:0px solid;
    36.         }[/COLOR]
    37.  
    38. [COLOR="Magenta"]#inhalt {
    39.         position:absolute;
    40.         z-index:2;
    41.         /* Platz für weitere Angaben */
    42.         color: #ffffff;
    43.         height: 100%;
    44.         font-family: sans-serif;
    45.         width:100%;
    46.         overflow:auto;
    47.         }
    48.  
    49.  
    50. #inhalt h1 {font-size:150%; }
    51.  
    52. #inhalt p { font-size:99%; padding:10px;}[/COLOR]
    53. -->
    54. </style>
    55. </head>
    56. <body >
    57. [COLOR="DarkGreen"]<div id="vollesBrett"><img src="grafixx/anpassung.jpg" alt=""></div>[/COLOR]
    58. [COLOR="Magenta"]<div id="inhalt"><h1>Hier steht die &Uuml;berschrift</h1>
    59.  
    60. <p>Hier steht der Inhalt. Das Bl&ouml;de bei gezerrten Bildern ist, dass sie bl&ouml;d aussehen...</p> <p>Hier steht der Inhalt.</p> ... <p>Hier steht der Inhalt.</p> </p>
    61.  
    62. </div>[/COLOR]
    63. </div>
    64. </body>
    65. </html>
    66.  
    Die Farben mal um zu zeigen welcher Teil des css auf welchen htmlBereich greift

    So entsteht der Eindruck, dass der Hintergrund gezerrt wird...
     
    #12      
  13. TheTalesOfImmo

    TheTalesOfImmo Medieninformatiker

    Dabei seit:
    20.01.2008
    Beiträge:
    47
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Adobe CC, Netbeans, Gehirn
    Kameratyp:
    Canon EOS 450D
    Hintergrund Gestreckt
    AW: Hintergrund Gestreckt

    Mea Culpa, ich sollte die Posts mal genauer lesen ^^
     
    #13      
  14. manuj170793

    manuj170793 Noch nicht viel geschrieben

    Dabei seit:
    01.07.2007
    Beiträge:
    11
    Geschlecht:
    männlich
    Hintergrund Gestreckt
    AW: Hintergrund Gestreckt

    ok, ich werds mal versuchen, danke für die hilfe

    MfG Manu
     
    #14      
  15. tobiiiii

    tobiiiii Guest

    Hintergrund Gestreckt
    AW: Hintergrund Gestreckt

    danke hat mir auch geholfen
     
    #15      
x
×
×