[ERLEDIGT] Background-image vollständige weite

[NiRu]

Hallo gemeinsam,

Ich suche nach einer Möglichkeit ein header image in der weite vollständig an den Bildschirm anzupassen.
Ich sehe das sehr oft bei einigen Webseiten.


Nun frage ich mich wie das funktioniert.
Ich habe in Google einen Beitrag dazu gefunden, dort habe ich erfahren das man sich an derzeitigen Standards der Desktop Auflösungen orientiert.
Was ist wenn ein Desktop von der Auflösung abweicht?
Gibt es da noch andere Möglichkeiten?
Es kann auch gerne über neuere Browser Standards erfolgen.

Vielen Dank!

 

[Max T.]

Habe ich die Frage richtig verstanden: Du möchtest oben ein div o.Ä., welches auf die gesamte Monitorbreite sich erstreckt und der Hintergrund soll sich auch strecken?
Dann so:

#header  {
width: 100%;
height: xy;

background-image: url("#");
background-position: center;
background-repeat: no-repeat;
background-size: 100% 45px;
}

der erste Wert bei Background-Size gibt die Breite an (100% in diesem Falle), der zweite die Höhe.

Zusammengefasst:

background: url("#") center no-repeat 100% 45px;

,wenn ich mich nicht vertan habe. ;)

Es müsste ich glaube auch gehen, wenn du bei dem #header width: 100%; weglässt...

VG

 

[NiRu]

Super, danke daran hab ich so gar nicht gedacht.
Habe noch eine weitere Frage, jetzt streckt es sich zwar zu 100% doch was ist wenn mein Webdesign Responsive ist und kleiner gezogen wird, dann wird es ja auch in der 'hight' kleiner, kann man die höhe automatisieren?

 

[Max T.]

Hmm, das verstehe ich jetzt nicht so ganz, wenn man die Seite in der Höhle verändert wird doch eine Scrollbar angezeigt? Die Höhe des headers verändert sich dabei ja nicht weil sie gegeben ist.
Oder verstehe ich das jetzt falsch? Kannst du vllt. ein Beispiel zeigen?

 

[NiRu]

Am liebsten wäre es mir wenn sich das Bild nur in die weite streckt.

    width: 100%;
    height: 300px; /* Dann die höhe des DIVs ja keine feste höhe haben */
    background-image: url(../img/bg_inf01.jpg);
    background-size: 100%;
    background-repeat: no-repeat;

Das Bild soll in voller Größe dargestellt werden, aber wenn ich den Browser in der 'width' ziehe wird das Bild ebenfalls kleiner, das selbe geschieht mit der Höhe.
Nun ist aber das Div in der höhe noch genau so groß wie zuvor, mir würden persönlich nur media-querys einfallen.

Bild 1
Bild 2

Nun bleibt die höhe von 300px ja, ich habe schon versucht einen idealen Prozent Wert für die Höhe zu errechnen aber das funktioniert scheinbar nicht wirklich:-D

//EDIT
Hallo, ich habe das Problem jetzt mittels Javascript gelöst.

$(document).ready(function(e){                var ADH = $('.image-header');                window.onresize = function (e){                    var imgsize = 477 / 1500 * ADH[0].clientWidth;                    ADH.css('height', imgsize);                };            });

Muss nur noch ein wenig angepasst werden.
Danke für die Hilfe!
Thema erledigt