Anzeige

Backround-image - wird nicht alles angezeigt

Backround-image - wird nicht alles angezeigt | PSD-Tutorials.de

Erstellt von hdd_1, 13.01.2015.

  1. hdd_1

    hdd_1 Noch nicht viel geschrieben

    Dabei seit:
    17.11.2014
    Beiträge:
    26
    Backround-image - wird nicht alles angezeigt
    Hallo

    Was muss ich genau machen, damit meine Background Image ganz angezeigt wird. Es zeigt nur soviel wieviel ich Text im .html habe ....
    Code (CSS):
    1. .ztn5{
    2. background: url(../bil_6.png);
    3. background-repeat: no-repeat;
    Habe auch probiert: background-size: 700px ..auch 70% ...bringt nichts....

    Siehe Bild was ich meine:

    Das schwarze (bil_6.png) sollte angezeigt werde, aber es wird nur ganz angezeigt wenn ich viel Text hinzufüge. -_-
    [​IMG]
    Danke
    EDIT - EDIT - EDIT ...WICHTIG:

    Ich habe es mit

    Code (CSS):
    1. height: 800px;
    2. display: block;

    wenn ich height: in % mache ...funktioniert nicht.

    erledigt. A
    ber es wird nicht Responsiv, obwohl ich mit

    @media only screen.... arbeite.


    Navigation und T
    ext werden angepasst, aber das schwarze "Ding" nicht, es bleibt egal ob iPhone,iPad etc..

    Wo mache ich denn
    Fehler?
     
    Zuletzt bearbeitet: 13.01.2015
    #1      
  2. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Backround-image - wird nicht alles angezeigt
    Code (CSS):
    1. .ztn5 {
    2.     background:url(img/bil_6.png) no-repeat;
    3. /* --| CSS3 |---------- */
    4.     background-size:cover;
    5. }
    Davon ab solltest du überlegen, ob es nicht auch ohne Grafik geht. Ich kenne dein Layout und Markup zwar nicht, aber sowie es ausschaut, könntest du auch mit border in gewünschter Größe arbeiten.

    Liebe Grüße, Patrick
     
    Zuletzt bearbeitet: 13.01.2015
    #2      
  3. hdd_1

    hdd_1 Noch nicht viel geschrieben

    Dabei seit:
    17.11.2014
    Beiträge:
    26
    Backround-image - wird nicht alles angezeigt
    @patrick_l Danke, aber funktioniert leider nicht so :( schade

    Ich habe es so gemacht, so funktioniert (bis jetzt)

    Code (CSS):
    1. .ztn5{
    2. background: url(../bil_6.png);
    3. background-repeat: no-repeat;
    4. height: 840px;
    5. /*display: block;*/
    6. background-position: center;
    7. }

    EDIT:

    @patrick_l Ich habe dir meinem Link per PM gesendet, wenn es für dich Ok ist.
     
    Zuletzt bearbeitet: 13.01.2015
    #3      
  4. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Backround-image - wird nicht alles angezeigt
    Du musst dem Element mit der Klasse .ztn5 auch eine Höhe und Breite geben. Habe ich jetzt nur ausgelassen. Dann funktioniert es auch.

    Kein Problem, schon gewohnt ;)

    Liebe Grüße, Patrick
     
    #4      
    hdd_1 gefällt das.
  5. Squeendot

    Squeendot Aktives Mitglied

    Dabei seit:
    20.01.2015
    Beiträge:
    269
    Geschlecht:
    männlich
    Ort:
    Bayern
    Software:
    Backround-image - wird nicht alles angezeigt
    Hallo hdd_1,

    Dank CSS3 gibt es jetzt die nette "cover"-Funktion für den Background.
    Das heißt ausgeschrieben, das Hintergrundbild wird so skaliert, dass kein Rand entsteht:

    Code (CSS):
    1. background-size: cover;
    Das ist übrigens auch responsiv!
    Man muss halt nur auf die Browserunterstützung achten.


    Lieber Gruß,

    Julian
     
    #5      
x
×
×