Html: Hintergrund-bild das sich dynamisch der browsergröße anpasst?

Hallo meine mitmenschen, bin grad am aufbauen einer Html seite, das einzigste was mich nervt ist das Hintergrundbild...habe viele codes ausprobiert aber nichts passt wirklich. Kurz uind knapp. 1. Es soll als Hintergrundbild anerkannt sein (Background) 2. Es soll sich automatisch anpassen,z.b wenn ich das fenster resize, aber so das das Seitenverhältnis bleibt. 3. Falls es zu klein oder groß ist, soll es sich auch selber anpassen. 4. Natürlich soll es den Hintergruind füllen, kann sein das die 4 mit dem Seitenverhältnis probleme bekommt, wenn das so ist sch* ich aufs seitenverhätlnis...danke für die hilfe.

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

frax18

12.12.2015, 02:29

Es gibt viele Wege das zu realisieren. Nutze CSS dafür. Die Zauberwörder für die protortionale Vergrößerung und Verkleinerung lauten:

background-size: contain;

oder

background-size: cover;

oder

background-size: 100%;

Quellen z.B.:

https://css-tricks.com/almanac/properties/b/background-size/

Hier wird auch die Browserunterstützung aufgeführt. Achtung: obiges gilt nur ab dem Internet Explorer 9+

Wenn du für ältere Browser Unterstützung gewährleisten möchtest musst du mit einem Block-Element arbeiten (Div) und folgendes nutzen:

width: 100%;

frax18

12.12.2015, 02:33

Hier noch ein Artikel für die Hintergrundskalierung im IE7+

http://stackoverflow.com/questions/14705025/background-size-100-not-working-in-ie8-and-ie7

Tiki1407

Fragesteller

12.12.2015, 02:35

Das mit background-size: Contain hat mir schon weitergeholfen, so will ichs haben, nur es sollte dann halt sich stretchen, sonst bekomm ich je nach fenstergröße weiße ränder!

Weißt du dafür was?

Das müsste dann eine mischung aus: Cover und contain sein. :/

frax18

12.12.2015, 02:38

@Tiki1407

Musst dann aber damit auch leben, dass dein Bild gestreckt oder gestaucht wird. Dann solltest du das hier versuchen:

background-size: 100% 100%;

Tiki1407

Fragesteller

12.12.2015, 02:39

@frax18

Danke. danke danke danke . Du bist der beste!

frax18

12.12.2015, 02:40

@Tiki1407

Bitte bitte :)

lolimov

12.12.2015, 02:23

http://m.onblog.at/responsive-webdesign-4-hintergrund-bilder-automatisch-skalieren (dürfte dir helfen, oder?)

Ähnliche Fragen

Hintergrundbild in HTML anpassen?

Hab neu mit HTML und css angefangen...

Ich möchte zum Anfang als Startprojekt sowas wie einen Lebenslauf gestalten und will eben ein bestimmtes Bild als Hintergrundbild.

background-image: url('thumb2-flag-of-bern-4k-swiss-canton-silk-flag-silk-texture.jpg');
background-repeat: no-repeat;

so steht es in meiner CSS, das passt auch nur ist es nur auf dem Viertel des Bildschirms. Was muss ich noch dazuschreiben damit es 1. nur ein Bild ist und nicht wiederholt wird und es sich an die Tabgröße anpasst?

...zur Frage

HTML/CSS Bild passt sich nicht automatisch an?

Hallo,

ich bin dabei HTML und CSS zu lernen. Kann mir jemand sagen, warum sich das Bild nicht automatisch der Browsergröße anpasst? Anbei mein Code.

...zur Frage

html/css text dynamisch anpassen?

hallo,
Weis jemand wie man Texte dynamisch der Bildschirmgröße anpassen kann? So wie bei div-containern oder Grafiken.

...zur Frage

Bild in HTML an Tab anpassen?

Wie kann ich das Bild so "formattieren", dass es sich dem Tab anpasst. Das heißt das es automatisch an den Tab anpasst und es nicht zu groß ist, so dass man hinunterscrollen kann?

...zur Frage

HTML weißen Rand entfernen

Ich habe eine Background Bild auf meiner Website welches sich an den Browser anpasst, jedoch habe ich immer einen weißen Rand rundherum, wie bekomme ich den weg?

Hier ein Beispiel: www.cyber-tech.ch

Hier mein HTML Code:

...zur Frage

Wechselndes Hintergrundbild in HTML?

Hallo, wie kann ich einen script in Html erstellen, sodass sich das Hintergrundbild ca alle 10 sekunden verändert. Ich habe das Hintergrundbild bisher im CSS definiert:

html{background: url(images/DSC_0601-01.JPG) no-repeat center center fixed;

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

}

Wäre nett wenn mir da jemand helfen könnte :)

...zur Frage

Html css Hintergrundbild ausfüllen?

Hi, mein hintergrundbild wird nicht ganz ausgefüllt und fängt automatisch am Rand neu an (wiederholt sich)

Mit background repeat bin ich irgendwie nicht so weit gekommen, kann mir da bitte jemand helfen?

Auf dem Bild sieht man das das Bild neben von neu anfängt

Danke

...zur Frage

Header automatisch anpassen lassen (HTML,CSS)?

Wie schon oben erwähnt will ich das sich der Header automatischt anpasst danke im voraus

lg lukas

p.s ich tue nacher noch das script hinzufügen muss aber meine Pizza abholen HAHA

...zur Frage

Größe für Videos automatisch auf Geräte anpassen HTML?

Hi,

ich programmiere grade an Videos also wie ich diese anzeigen kann ohne YouTube. Und da es komisch auf dem Handy aussieht wollte ich fragen, ob es eine Möglichkeit gibt, dass sich die Größe des Videos automatisch auf das gerät anpasst?

...zur Frage

Wie passe ich die Größe eines HTML-Objektes mit CSS dynamisch an?

Wenn ich die Seite also kleiner mache, sollte sich das Objekt, wie oben beschrieben, anpassen.

Wie mache ich das?

Danke im Voraus

...zur Frage

<textarea> dynamisch an die Länge des Textes anpassen, ohne Scrollbar und ohne Javascript?

Hallo,

ich möchte die Größe meines textarea der Länge des Textes anpassen. Sprich, ich habe eine orvgegebene Größe und wenn der Text länger wird, wird das Feld automatisch um eine Zeile größer. Da es für die Uni ist, darf ich kein Javascript benutzen, sondern nur HTML, CSS und PHP.

Vielen Dank schonmal!

...zur Frage

[HTML] Chrome zeigt Hintergrundbild nicht an, IE schon

Hallo Leuts!

Ich habe einen Div mit einem Mülleimer als Hintergrund Bild, alles schön und gut, aber im Chrome zeigt er mir ihn nicht an, also da ist kein Bild. Im Internet Explorer schon. Weiß einer eine Lösung??? o_O

Hier mal der CSS Coder:

.newsdeletebutton {
position: relative;
margin-top:105px;
left:310px;
position:relative;
height:25px;
width:25px;
border:none;
color:rgba(255,255,255,0);
background-image: url(images/mülleimerzu.png);
background-repeat: no-repeat;
background-color:rgba(255,255,255,0);
cursor:pointer;
}

...zur Frage

Suche HTML Code für zentrierten Hintergrund

Ich habe ein Hintergrundbild auf meiner Webseite einfügt.So weit alles gut.Bei mir auf dem Monitor schaut alles super aus.Ich benutze eine Auflösung von 1680x1050.Aber wenn ich die Auflösung runter mache oder bei meiner Freundin auf meine Webseite gehe die eine niedrigere Auflösung hat dann ist alles verschoben.Bei mir ist alles auf 1680x1050 angepasst.Ich wollte wissen ob es einen Code gibt bei dem sich mein Hintergrundbild Automatisch anpasst.

...zur Frage

Wieso ist das Hintergrundbild nicht fixiert?

Hi Zusammen

In meinem Shop wollte ich ein Hintergrundbild einbauen, auf Desktop funktioniert es super aber auf Mobile überhaupt nicht. Ich habe background-attachment auf fixed gestellt, aber trotzdem zieht sich das bild über die ganze länge der Website und es ist nicht so wie auf Desktop.

Website: www.hyghassociation.org

Hier der Code:

body,

html {

background: url({{ 'background.jpg' | asset_url }});

background-color: #000;

-webkit-background-size: contain;

-moz-background-size: contain;

-o-background-size: contain;

background-size: contain;

background-position: center;

background-attachment: fixed;

}

@media only screen and (max-width: 749px) {

body {

background: url({{ 'mobile_background.png' | asset_url }});

-webkit-background-size: contain;

-moz-background-size: contain;

-o-background-size: contain;

background-size: 100% 100%;

background-position: center;

background-attachment: fixed;

Würde mich über Hilfe freuen :=)

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen