WBCE CMS Forum

WBCE CMS – Way Better Content Editing.

You are not logged in.

#1 03.04.2020 14:32:07

berny
Member

css background-image responsive

bin da nicht ganz 100% dabei:
ich habe ein div mit logo, text und background-image.

die Bilder haben 1340x350 px

jetzt möchte ich das div so gestalten, dass es, egal wie gross das Fenster ist, immer die grösse des Bildes im Hintergrund ist, und dieses auch voll dargestellt wird, sprich je nach fensterbreite 100% width und proportional height, sodass man immer das Bild angepasst sieht.

ich hoffe, das verständlich erklärt zu haben.

ich bring das einfach nicht hin....

Offline

#2 03.04.2020 16:11:53

colinax
Administrator

Re: css background-image responsive

Ich weis vermutlich was du meinst:

background-size: cover;

nur was bekommst du da nicht hin?

Offline

#3 03.04.2020 17:54:19

berny
Member

Re: css background-image responsive

http://www.weisse-schaefer.at/wbce/index.php

Template ist Klawinder, es geht letztlich um das css größer oder kleiner als 600...

Die Header-Bilder sind 1340x350 groß

Das mit dem Cover habe ich schon, aber irgendwo hab ich was falsches drinnen, was mir bei schmäleren Seiten >600 trotzdem das Bild nicht voll darstellt.

Ich gehe davon aus, dass ich die ganzen Div min-height oder abändern muss.

Ich will einfach, dass das Div genauso groß ist, wie das Hintergrundbild, eben proportional weite 100% zum offenen Fenster
Ab 1340 kanns eh fix sein, weil der Container auch nicht größer ist.

Offline

#4 03.04.2020 18:14:26

colinax
Administrator

Re: css background-image responsive

Dass mit den schmäleren Seiten nennt sich MediaQueries oder auch media breakpoints und beginnen mit @media

Offline

#5 04.04.2020 10:15:23

berny
Member

Re: css background-image responsive

das weiss ich schon, es geht mir aber darum, dass sich das Div proportional zur Fenstergrösse ändert, sodass das Headerbild immer zu 100% breite und höhe dargestellt wird.

ev geht das bei einem Hintergrundbild gar nicht....

Last edited by berny (04.04.2020 10:16:05)

Offline

#6 04.04.2020 11:16:55

colinax
Administrator

Re: css background-image responsive

Ich hab hier zwei Seiten (Beide hab ich gemacht) einmal für ein Haus und für eine Alm.

Bitte verwende den A) den Zoom inner halb des Browsers (am besten mit der Strg + Mausrad) und B) verändere die Größe und Breite des Browserfensters an sich.

Welches von den beiden willst du?

Last edited by colinax (04.04.2020 11:26:46)

Offline

#7 04.04.2020 12:05:20

colinax
Administrator

Re: css background-image responsive

Hat sich das Problem jetzt behoben oder existiert es immer noch?

Bei mir ist aktuell alles so wie von dir gewünscht ist.

Offline

#8 04.04.2020 13:01:27

berny
Member

Re: css background-image responsive

Ich hab daran gebastelt, habe das jetzt mit direkten img gelöst und die Div mit Logo und Schrift darüber gelegt

Noch nicht ganz 100% was ich will, aber schon erheblich besser.

Offline

Board footer

Powered by FluxBB

up