• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Backround passt sich nicht an

K

Kollho

Neues Mitglied
Hallo,
ich versuche nun schon einige Zeit ein Bild als Backround zu verwenden,
nur bei dem normalen Backround Code bzw. img Code sieht man nur ein teil des Bildes und der Rest ist nicht sichtbar.
Wenn ich jetzt die with und die height auf auto stelle muss ich hoch und runter scrollen und nach rechts scrollen das ich das Bild genau sehe.
Habt ihr einen Code der mein Bild komplett im Browser anzeigt und später auf anderen Endgeräte bzw. könnt ihr mir helfen ?
Das ist mein aktueller Code
HTML: 
<html>
<body>
    <img src="...">

  </body>
</html>
MFG
 
Werbung:
Mach dich mal mit CSS bekannt, da HTML ohne CSS wertlos ist. Wenn du das kannst ist es auch einfach ein Bild als Hintergrund zu nehmen
 
Versuch doch mal mit:
Code: 
<body background="bild.png">
wie LeCub schon gesagt hat würde ich hierfür auch CSS verwenden. An deiner stelle würde ich auch bei den Bilder mit größe und breite mit prozenten arbeiten.
 
Werbung:
Hallo Kollho

Der CSS Code würde so aussehen:

Code: 
html {
background: url(hintergrundbild.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}

In deinem Fall würde es z.B. so aussehen:

Code: 
<!DOCTYPE html>
<html lang="de-ch">
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type">
    <meta name="viewport" content="width=device-width, initial-scale=no, user-scalable=yes">
    <meta content="ROG Innovation" name="author">
    <title>Deine Seite</title>
    <meta content="deine schlüsselwörter, xx" name="keywords">
    <meta content="Deine Seiten Beschreibung" name="description">
    <style type="text/css">
html, body {
    background: url(http://www.roginnovation.com/tutorials/website/css/flexiblebackground/hintergrundbild.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    margin:0;
    padding:0;   
    background-color: #000000;
    font-family: Calibri;
    font-size: 1em;   
    color: #FFFFFF;}
</style> </head>
  <body>
    <article>
      <h1 style="text-align: center; text-shadow: 0.1em 0.1em 0.2em black"><br>
      </h1>
      <h1 style="text-align: center; text-shadow: 0.1em 0.1em 0.2em black">Dynamisches
        Website Hintergrundbild, dass sich jeder Auflösung anpasst</h1>
      <br>
      <div style="text-align: center; text-shadow: 3px 3px 3px rgba(0, 0, 0, 1); font-size: 2.5em;">
        Seiten Inhalt </div>
    </article>
  </body>
</html>

Hier müsstest du nur noch die Bild URL (http://www.roginnovation.com/tutorials/website/css/flexiblebackground/hintergrundbild.jpg)
durch dein eigenes Bild ersetzen.

Falls du noch mehr Infos brauchst hier das Tutorial auf Deutsch
http://www.roginnovation.com/tutorials/website/css/flexiblebackground/flexiblebackground.php
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben