Hintergrundbild vergrößern

[aircraft]

Hallo zusammen, ich hab wenig bzw. viel zu wenig Erfahrung mit CSS. Ich versuche meine HP zu verbessern. Hab mit Photoshop ein Hintergrundbild erstellt in der Größe von 1660 x 700 Pixel. Beim hochladen konvertiert es (bei Overblog) auf 1200 x 504 Pixel. Jetzt ist das Hintergrundbild etwas zu klein. Im Moment sieht der CSS Code so aus: body { background-attachment: scroll; background-clip: border-box; background-image: url("http://idata.over-blog.com/3/65/46/07/Hintergrundbild/4.jpg"); background-origin: padding-box; background-position: center top; background-repeat: no-repeat; background-size: auto auto; background-color: #000; } Ist es möglich noch einen Code zufügen der das Hintergrundbild auf meine gewünschte Größe anpasst? Danke im Voraus

 

[Cheffchen]

Hallo und tach hier,

gott hat nicht um sonst zeilenumbrüche erfunden. Das macht das lesen und verstehen um einiges leichter.
(wenn die mit den Obst nicht schon das pantent dazu haben ist das noch frei nutzbar :O) )
es gibt hier icons wo mit man code einfügt das dieser optisch aufbereitet wird :O)

versuch mal das.

body {          background-attachment: scroll;     
background-clip:  border-box;      
background-image:  url("http://idata.over-blog.com/3/65/46/07/Hintergrundbild/4.jpg");            
background-origin: padding-box;      
background-position: center  top;      
background-repeat: no-repeat; 
     /*background-size: auto auto;  */
       background-color:  #000;-webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}

Cheffchen

 

[aircraft]

Danke für schnelle Antwort.

es gibt hier icons wo mit man code einfügt das dieser optisch aufbereitet wird :O)

Sorry, muss mir hier einen Überblick schaffen. Ich war gestern bis an meine Grenzen genervt.

Der Ansatz ist geht schon mal in die richtige Richtung. Das Hintergrundbild ist größer ... leider ist es jetzt zu groß. Man kann auch erkennen das, dass Bild Unschärfe bekommt. Ist es möglich mit CSS das Bild auf 1660x700 Pixel zu machen?

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Kannst du mir eine Link geben wo dieser Code beschrieben steht das ich verstehen was hier mit diesen Code bewirkt wird od. kannst du mir diesen Code kurz erklären. Im Moment suche ich in den Seiten: selfhtml.org, html-seminar.de, css-info.de, css4you.de

Gruß aircraft

Edit: Hab das HIER im www. gefunden. Jetzt verstehe ich auch deine angefügten Code.

 

[threadi]

Hier sind die Unterschiede der Werte für background-size ganz gut erklärt:
Background-size - CSS3 . Info

 

[aircraft]

Danke für die Tipps.

O.k ich habs verstanden das hier der Hintergrund den verschiedenen Browser sowie verschieden Bildschirmgröße (Stand-PC, Notebook, Tap) anpasst. Schon mal super Eigenschaften. Aber mein generelles Problem bleibt. Das Bild (1660x700 Pixel) wird beim hochladen kleiner (zu 1200x504) konvertiert. Hier gehen Pixel verloren. Bei Tab od. Notebook kein Problem da ist der Bildschirm kleiner aber beim Stand-PC wird die Qualität schlechter. Da wird das Bild durch den Code auch wieder Vergrößert.
Leider kann ich kein Bild mit Vektorgrafik machen.

 

[threadi]

Das Bild (1660x700 Pixel) wird beim hochladen kleiner (zu 1200x504) konvertiert.

Das heißt die Grafik selbst wird auf dem Server kleiner gespeichert als sie tatsächlich ist? Wer oder was verursacht das denn? Wie lädst Du sie hoch?

 

[aircraft]

Ich hab meine HP bei Over-Blog. Da ist es auch möglich CSS zu bearbeiten was ich gerade versuche.

 

[threadi]

Und die Datei die Du dort hochlädst ist, wenn Du sie danach im Browser öffnest, kleiner? Dann musst Du dich an den Support dort wenden.