Hintergrundbild CSS Cover geht nicht bei Handys

  • Hallo,


    erstelle gerade eine Homepage welche ein Hintergrundbild beinhaltet. Da es bildfüllend sein soll habe ich Backround-size auf cover eingestellt.
    Das funktioniert auch prima in allen Fenstergrössen und Browser auf dem PC nur leider nicht auf Handys (Android). Da klebt das Hintergrundbild oben am Rand und füllt keinesegs den Bildschirm komplett aus.


    Mein CSS Code

    CSS
    background-image: url('./Back1b.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; margin: 0px; webkit-background-size: cover; background-size: cover; moz-background-size: cover; o-background-size: cover;"


    Woran liegt das?


    Wer es testen will:
    http://test.visionbrasil.dehttp://test.visionbrasil.de/
    Am besten natürlich auf dem Handy






  • Hi, du hast das mit einer Tabelle gemacht. Ich hab schon öfters gelesen, dass Tabellenlayouts nicht mehr aktuell sind und auf Handydisplays nicht funktionieren. Außerdem würde ich das:

    HTML
    <!DOCTYPE html>

    als Doctype nehmen und das:

    HTML
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    fehlt dir auch.


    Ich kenne mich selber noch nicht so besonders gut aus, aber versuch mal ein Tutorial für responsive Webdesign zu machen.


    Liebe Grüße
    marina

  • Ist doch eigentlich alles drin:


    HTML
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Home</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><style type="text/css">    .transparent{    background-color: rgba(255,255,255,0.8);    }</style>
    <style type="text/css">    .transparent2{    background-color: rgba(0,0,0,0.5);    }</style>
    <meta name="viewport" content="width=device-width" />


    Ja, mit responsive Webdesign habe ich mich mal versucht zu beschäftigen. Habe es aber nach Wochen generft aufgegeben. Arbeite mit NOF und seit Jahren mit Tabellen. Alles andere werde ich wohl nicht mehr hinbekommen.

  • Hi,


    @visionbrasil :


    Dein HTML-Code ist veraltet. HTML 5 ist zurzeit das aktuellste.


    Der Aufbau von HTML5-Code sieht wie folgt aus:


    HTML
    <!DOCTYPE html>
    <html>
      <head>
      	<meta charset="UTF-8">
      	<title>DeinSeitentitel</title>
     </head>
    <body>
    </body>
    </html>


    Und das gepostete von marina :


    HTML
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    ist für Handys.


    Ein Seitenaufbau mit Tabellen würde ich niemanden empfehlen. Selten ist dies vom vorteil .


    Gruß,
    Stef

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!