Hintergrundbild soll div höhe bestimmen

[Bennyaa]

Hallo, wie kenn ich denn ein Bild im Hintergrund halten, was einerseits die div Höhe bestimmt,
andererseits aber keinen Einfluss auf den Rest der Seite haben soll.
Situation:
Ich möchte eine Seite erstellen, auf welcher ich mittels grid system diverse daten darstellen möchte.
Nun soll im Hintergrund das Bild liegen und anhand seiner breite je nach Auflösung die höhe bestimmen.
Anhand der größer des divs werden ja auch die divs aufgelöst. aber die sind eben nur über dem bild, wenn ich diese absolut positioniere, das möchte ich gerne vermeiden und statt dessen das bild im hinterund halten und die divs im normales flow belassen.

Hat jemand eine idee?

es sieht aktuell so aus (Die fieldsets mit den ausgaben wie ergebnis sind absolut positioniert, was ich gerne vermeiden möchte):

 

[netzgestaltung]

was soll da das hintergrundbild sein?

 

[Bennyaa]

Das Hintergrundbild sind quasi 3 Teile.
Der linke schwarze Teil, der mittlere klemmblock und das rechte blaue Gerät.

 

[sandreas]

Ich glaube du gehst das ganze falschrum an. Wenn du mit Hintergrund-Bildern arbeiten willst, würde ich das Grid relativ aufbauen, so dass das Grid genau so aussieht, wie du willst und dann mit background-size:cover; arbeiten.

https://jsfiddle.net/xd94g6jv/

Falls das nicht das ist, was du willst, musst du die bilder in den Vordergrund holen und als <img> verwenden (sieht für mich in deinem Fall ohnehin sinnvoller aus). In diesem Fall würde ich dann mit Media-Queries, min-width und max-width arbeiten bzw. auch mit prozentuellen Angaben. Siehe hier: https://www.w3schools.com/howto/howto_css_image_responsive.asp

 

[Bennyaa]

Also würdest Du die dargestellten fieldsets und Texte absolut positionieren, oder eher in Grid Systemen anlegen und somit die Position festgelegen?

Aktuell habe ich da linke Bild als img relativ auf Position 0 positioniert und die beiden daneben absolut.
Wenn ich das erste nicht relativ positioniere, dann wird das gesamte div kleiner, weil das Bild im Fluß fehlt.

 

[Bennyaa]

Also die Frage ist im wesentlichen:
1. sollte man sich auf der Seite mehrere Grids aufbauen mit denen man dann die Elemente platziert?
2. wie bekomme ich die Bilder eingebunden, dass diese die Höhe bestimmen (des divs), aber gleichzeitig nicht meine grids verschieben.

 

[sandreas]

Also würdest Du die dargestellten fieldsets und Texte absolut positionieren, oder eher in Grid Systemen anlegen und somit die Position festgelegen?

Das hängt davon ab, wo die Anwendung überall laufen soll. Ich persönlich mag GRIDs sehr gern, denn sie sind flexibel. Absolute Positonierung ist vielleicht einfacher, wenn du es nur auf einem Gerät laufen lässt...

 

[Bennyaa]

Das hängt davon ab, wo die Anwendung überall laufen soll. Ich persönlich mag GRIDs sehr gern, denn sie sind flexibel. Absolute Positonierung ist vielleicht einfacher, wenn du es nur auf einem Gerät laufen lässt...

Ja möchte es gerne unabhängig von der Aauflösung und dem Gerät entwickeln.
Habe jetzt mit Grid gearbeitet und es sieht schon ganz gut aus.

Habe jetzt quasi ein bild wie gesagt relativ gelassen, um die höhe zu gewinnen.
Dann habe ich meine Grids absolut positioniert. (geht ja nicht anders, da sie ja sonst unter dem Bild erst anfangen. oder?

Das klappt alles ganz gut, aber bei einem Grid (Da wo ergebnisse steht) habe ich das Problem, dass aus einem sich mir nicht erklärbaren Grund die zeilenhöhe bei kleinen schriftgrößen zu groß einstellt.
bei großen ist alles ok.
Kann es nicht nachvollziehen. jemand eine idee?


Edit: habe nun noch die items zentriert (in der y-achse), jetzt hat er sie auch schön zusammen geschoben.

 

[Bennyaa]

Aber es stellt sich mir immer noch die Frage, ob ich das ganze irgendwie lösen kann, ohne die grids absolute positionieren zu müssen, denn das ist mir irgendwie ein Dorn im Auge.
Ich würde viel lieber meine Grids anordnen und entsprechend die elemente verteilen, aber ohne ein relatives Bild, besteht keine Höhe und man kann somit auch nichts prozentual positionieren und positioniert man es mit absoluten Bezügen wie px oder rem, so ist es nicht mehr wirklich responsive, da es sich verschiebt.

 

[sandreas]

Schau dir seine Videos mal an. Besser kann man GRID meiner Ansicht nach nicht erklären:

YouTube

An dieser Stelle steht ein externer Inhalt von YouTube, der den Forumbeitrag ergänzt. Er kann mit einem Klick geladen und auch wieder ausgeblendet werden.

YouTube-Embeds laden

Ich bin damit einverstanden, dass YouTube-Embeds geladen werden. Dabei können personen­bezogene Daten an YouTube übermittelt werden. Mehr dazu in der Datenschutzerklärung.

YouTube-Embeds laden

Datenschutzerklärung

 

[Bennyaa]

Schau dir seine Videos mal an. Besser kann man GRID meiner Ansicht nach nicht erklären:

YouTube

An dieser Stelle steht ein externer Inhalt von YouTube, der den Forumbeitrag ergänzt. Er kann mit einem Klick geladen und auch wieder ausgeblendet werden.

YouTube-Embeds laden

Ich bin damit einverstanden, dass YouTube-Embeds geladen werden. Dabei können personen­bezogene Daten an YouTube übermittelt werden. Mehr dazu in der Datenschutzerklärung.

YouTube-Embeds laden

Datenschutzerklärung

Danke, gutes Video. bekomme nur meine fieldsets nicht wirklich ohne ein relatives Bild gesetzt.