Div genauso groß wie das Fenster in dem eine Website geöffnet ist?

Setzt man ein "background-image: ..." dann wird das Bild genauso groß gemacht wie das Fenster selber auch ist: An der unteren und seitlichen Kante wird ggf ein Teil abgeschnitten. Hat man nun ein Div mit mehren Bildern und möchte dieses so setzen wie ein background-image wüsste ich nicht wie ich das umsetzen würde... Konkret also: Wie setzt man ein Div exakt auf die Größe des Fensters in dem die Website selber geöffnet ist sodass am unteren und seitlichen Rand abgeschnitten wird sofern das Div selber größer ist als das eigt sichtbare Fenster?

3 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

MrAmazing2

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML, programmieren

09.02.2022, 17:18

So setzen wie ein background-image. Wie setzt man ein Div exakt auf die Größe des Fensters in dem die Website selber geöffnet ist

Mit

height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;

sodass am unteren und seitlichen Rand abgeschnitten wird sofern das Div selber größer ist als das eigt sichtbare Fenster

Kein Plan was du hiermit meinst, sorry. Wenn du das Div so groß machst wie das Fenster, dann wird es nicht größer sein als das Fenster.

Woher ich das weiß:Hobby – Programmieren ist mein Hobby & Beruf

Yoshi1029

Beitragsersteller

09.02.2022, 17:21

Ein bisschen blöd formuliert... Öffnest du eine Website auf deinem Bildshirm und auf ihr befindet sich ein Inhalt der "größer" ist als das was du als erstes siehst dann kannst du zur Seite scrollen. Ich möchte aber das, auch wenn das Bild größer ist, es abgeschnitten wird und man nicht zur Seite scrollen kann/muss

MrAmazing2

09.02.2022, 17:23

@Yoshi1029

Gib dem Website-body (oder dem Container in dem sich das div befindet) einfach

overflow-x: hidden;

Yoshi1029

Beitragsersteller

09.02.2022, 17:27

@MrAmazing2

Vielen vielen Dank für deine Hilfe

MrAmazing2

09.02.2022, 17:35

@Yoshi1029

Gerne ^^

TechPech1984

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Computer

08.02.2022, 22:11

das problem ist , du brauchst content oder feste größen

https://jsfiddle.net/ywL2sv47/2/

Yoshi1029

Beitragsersteller

08.02.2022, 22:32

Verstehe leider nicht ganz was du mit "content " meinst

TechPech1984

08.02.2022, 22:34

@Yoshi1029

englisch deutsch gibts auch bei googel . kannst aber auch nach Kontent suchen im Duden . dein div ist nur so groß wie der content wenn er sich anpassen soll . sonst kann man noch mit min-height arbeiten , vielleicht hilft das ja bei html5

Yoshi1029

Beitragsersteller

08.02.2022, 22:36

@TechPech1984

Ein Duden wird mir nicht helfen wenn ich den Zusammenhang nicht verstehe....

apachy

09.02.2022, 17:25

Wenn du es abschneiden willst, dann schaltest du einfach das Scrolling aus. Sprich:

elternelement {
  overflow: hidden;
}

Das kannst du natürlich auf die ganze Seite machen, also z.B. auf dem body oder anderen Containern.

Woher ich das weiß:Berufserfahrung – Softwareentwickler/Projektleiter seit 2012

Ähnliche Beiträge

CSS Lichterkette als Border?

Hallo, für ein Schulprojekt muss ich eine Adventkalenderwebsite programmieren und designen. Jedenfalls habe ich ein kleines Fenster (Div), dass ich gerne mit einer Lichterkette umranden würde (gerne animiert). Ich habe bereits mit border-image herumprobiert, jedoch hat es nicht wirklich gut geklappt. Habt ihr eine Lösung?

...zum Beitrag

CSS-Hintergrund fixed auf Mobilgeräten?

Hallo zusammen,

auf meiner Website habe ich ein Hintergrund eingebunden, welches mit background-attachment:fixed; beim Scrollen fixiert ist. Auf Mobilgeräten wird das aber anscheinend nicht erkannt, sodass das Bild dort verzerrt ist.

Im Internet konnte ich bis jetzt nichts finden, außer, dass es nicht erkannt wird. Einen guten Lösungsvorschlag konnte ich nicht finden. Deshalb hoffe ich, dass ihr mir helfen könnt. Vielen Dank schonmal für alle Antworten!

Hier noch ein Ausschnitt aus meinem Code:

body {
  background-image: url("../../img/Tardan99x.jpg");
  background-attachment:fixed;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

...zum Beitrag

CSS Scroll-Parallax mit background-position?

Ich habe ein reiner Parallax-Effekt mittels CSS der auch genauso funktioniert wie er soll. Hierbei handelt es sich um ein einziges DIV mit Hintergrundbild:

<div id="h123_3" class="container-fluid parallax" style="height: 40vh; background-image: url(/bilder/bild1.jpg);"><a href="#h123_3" class="imageOpener btn btn-light btn-sm">Vergrößern</a></div>

Das CSS:

.parallax {
  background-attachment: fixed;
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0px 0px 30px #444;
  position: relative;
  transition: all 0.5s ease;
}

Einzigstes Problem: Durch background attachment: fixed wird das Bild ja relativ zum Viewport, also an der oberste Bildkante, fixiert. Gibt es ein Trick/Workaround in dem ich es schaffe, dass background-position: bottom trotzdem funktioniert ohne den Parallax-Effekt (durch fixed) zu verlieren? Auch JS würde ich gerne weitgehenst verzichten.

Edit: Hab mich etwas falsch ausgedrückt. Ja background-position funktioniert. Nur das Parallax-DIV sitzt beim Laden der Seite am oberen Bildschirmrand. Dadurch wird trotzdem nur der größteil obere Bildausschnitt angezeigt.

...zum Beitrag

HTML/CSS Website größe automatisch anpassen / skalieren?

Hallo!

Und zwar wollte ich mal fragen wie das geht, dass wenn man beispielsweise die Website verkleinert, das dann der Text und die Website nicht verschwindet, sondern das alles darin sich automatisch anpasst und mit der Fenster größe dann halt Skaliert.

So wie auf dieser Seite: https://www.massiveart.com/de/blog/website-layout-100-viewport-so-wird-s-gemacht

...zum Beitrag

Frag zu CSS Background Images?

Guten Tag,

aus Langeweile wollte ich die Starbucks Website https://www.starbucks.com/rewards nachbauen, nur habe ich keine Ahnung, wie das mit dem Background-Image gemacht wurde.

Der Stern wurde als Hintergrund der ganzen Box gesetzt und skaliert mit - die grüne Box aber auch?

https://codepen.io/stewn/pen/JjrjPzX

Es geht um heading-section.

Das Bild ist

-responsiv

-die grüne Box ist immer so groß wie das Bild

-das Bild bleibt immer an der Kante

...zum Beitrag

HTML / CSS: Meine div-Box-Breite passt sich automatisch dem Inhalt an?

Wie löse ich das Problem? Die div-Box soll immer die gleiche Breite behalten.

CSS-Code:

.btn-1 {
  text-transform: none;
  cursor: pointer;
  overflow: visible;
  font-family: inherit;
  line-height: inherit;
  padding: 20px 50px;
  color: white;
  background-color: #424242;
  border-color: #fff;
  transition-duration: 0.4s;
  border-radius: 15px !important;
  font-size: 1.3em !important;
  text-rendering: auto;
  word-spacing: normal;
  letter-spacing: normal;
  text-shadow: none;
  align-items: flex-start;
  font: 400 13.3333px Arial;
  border-width: 2px;
  border-style: outset;
  border-image: initial;
}

HTML:

<button data-shoppy-product="hzX6G9S" class="btn-1">Pay 15 €</button>

Unwichtig:

<script src="https://shoppy.gg/api/embed.js"></script>

...zum Beitrag

Hintergrund bild im header wird nicht angezeigt?

Hallo, ich will in meine Html Website ein Bild als Hintergrund im Header haben, dies geht nicht, ich habe schon mehrmals gegoogelt und verschiedene Codes probiert, aber wenn ich die Seite aktualisiere bleibt sie weiß, und sagt, dass das Bild nicht gefunden werden konnte, obwohl ich es im gleichen Ordner habe wie meine Index und CSS Datei. Wisst ihr einen Rat? Danke im Voraus.

hier der Css Code:

.header{

min-height: 100vh;

width: 100%;

background-image: /*linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),*/ url(Website4/Dateien/Bilder/12.png);

background-position: center;

background-size: cover;

position: relative;

overflow: hidden;

}

...zum Beitrag

Größe des Eltern div-Container an die Größe der Kinder div-Container anpassen?

Hey Leute. Ich bin gerade dabei eine Seite zu erstellen und gleichzeitig CSS zu lernen.

Jetzt bin ich dabei eine Seite zu designen, die Einzelheiten eines Benutzers zeigen soll. Nur bekomme ich das mit den div-Containern einfach nicht hin.

Meinem Verständnis nach ist das so, dass wenn ich einen Container habe, in dem zwei weitere Container sind die nebeneinander angeordnet sind und ich dann beiden die Höhe 100% gebe, dann müssten beide doch die maximale Höhe des Eltern Containers annehmen, oder verstehe ich da was falsch? Weil ich bekomme das einfach nicht auf die Reihe. Ich hab mal ein Bild angehängt in dem der Eltern Container (grau) der erste Kind Container (grün) und der zweite Kind Container (gelb) eingefärbt sind. Und da sieht man gut dass der Kind Container einfach über dem Eltern Container hinausschießt..

Ich hänge nochmal den Code aus dem HTML und dem CSS an. Vielleicht habe ich ja auch einen Denkfehler oder kenne mich einfach nur noch nicht genug in CSS aus und jemand kann mir helfen :)

Hier die Container: (Ich hoffe der Code wird richtig eingefügt. Irgendwie ändert sich hier im gutefrage Editor nichts)

<div class="benutzerprofil">
<div class="anschrift">
    <div class="uberschrift">
        <a class="uberschrift">Anschrift</a>
    </div>
    <div class="inhalt">
        <a class="anschrift">
        <?= $user->vorname . " " . $user->nachname ?><br>
        <?= $user->strasse . ", " . $user->hausnummer ?><br>
        <?= $user->postleitzahl . " " . $user->wohnort ?><br>
        <?= $user->bundesland ?>
        </a>
    </div>
</div>

<div class="erreichbar">
    <div class="uberschrift">
        Partner erreichbar unter
    </div>
    <div class="inhalt">
        <span class="erreichbar">
        E-Mail Adresse: <a href="mailto:<?= $user->email ?>"><?= $user->email ?></a><br>
        Handynummer: <?= (($user->handynummer==null)?"Nicht angegeben":$user->handynummer) ?><br>
        Telefonnummer: <?= (($user->telefonnummer==null)?"Nicht angegeben":$user->telefonnummer) ?>
        </span>
    </div>  
</div>
</div>

Und hier der CSS Code dafür:

div.anschrift {
    height: 25%;
    background-color: gray;
}

div.anschrift > div.uberschrift {}
    float: left;
    background-color: green;
    height: 100%;
}

div.anschrift > div.inhalt {
    height: 100%;
    background-color: yellow;
}

...zum Beitrag

HTML/CSS, Bilder werden nicht angezeigt?

Ich habe im <body> mehrere divs, in denen abwechselnd divs und Texte untereinander angezeigt werden sollen. Die Bilder sollen auf voller Höhe sein (height: 100vh;). Wenn ich die Bilder mit <img src=""> im HTML Code im div einfüge, wird es angezeigt. Will ich es aber in meiner CSS Datei als background-image vom div einfügen, wird der Bereich, wo das Bild sein sollte, einfach nur grau. Die style.css ist richtig in der HTML-Datei angegeben, da andere Styles funktionieren. Der Pfad ist ebenfalls richtig angegeben. Hat jemand Ideen, was ich falsch mache? :(

...zum Beitrag

Frage zu CSS background-image?

Hallo Gutefrage,

links mein Code, rechts wie es aussehen soll:

Der Bildschirm soll an den Bild-Rand abgeschnitten werden.

Ich habe es versucht, indem ich die with verkleinert habe, dann wird das Bilder aber nur rechts abgeschnitten.

So sieht das Bild bei mir aus:

Also es wir rechts abgeschnitten, wenn ich die width verkleinere. Kann ich das irgendwie umdrehen, dass es links abgeschnitten wird und trotzdem links ab Bild-Rand bleibt?

...zum Beitrag

HTML CSS Background Filter?

Hi ich habe seit einer Woche angefangen mit das Programmieren beizubringen, und bin nun auf folgendes Problem gestoßen.

Ich habe bei der HTML Datei in <body> das hier drin :

<body>

<ul>

<li><a href="" class="active"><b>Tv Shows</b></a></li>

<li><a href="" class="active">Movies</a></li>

<li><a href="" class="active">Recetly Added</a></li>

</ul>

<a href="" class="logo">NETFLIX</a>

</header>

<span>99% Match</span>

</div>

</div>

</section>

</body>

Und in der CSS Datei habe ich den Body so definiert:

body{

background: url(wallpaper1.jpg);

background-size: cover;

background-repeat: no-repeat;

height: 100vh;

Nun habe ich das Problem wenn ich nun einen Filter wie z.B Brightness anwenden will macht es ja nun logischerweise den ganzen Body Dunkler aber ich möchte nur den background verdunkelnm, sodass die anderen Elemente stärker zum Vorschein kommen.

Und meine zweite Frage wäre diesen background zu Skalieren weil auf dem Original Bild ist unten links ein kleiner Schriftzug der auf der Website nun abgeschnitten ist.

Vielen Dank :)

...zum Beitrag

in Html/Css etwas zeitabhängig darstellen.

Hallo Leute. Ich wollte mal ausprobieren, den Hintergrund einer website Tageszeitabhängig zu verändern. Also wenn Tag ist ist es ein Bild vom Restaurant bei Tag bei Nacht eben eine Nachaufnahme.

Jetzt habe ich ein div, in dem eigentlich der ganze content usw drinnen ist. Dieses div hat als Hintergrundbild eben den background a ( Tag )

allerdings wüsste ich nicht wie ich das hinbekommen sollte, dass es dann automatisch wechselt.

Es wäre echt super wenn da jemand eine Lösung hätte.

Mfg. Justin.

...zum Beitrag

HTML/CSS: Floats überlappen sich beim Minimieren, wie behebt man das?

Hallo,

ich bin dabei eine kleine Website zu erstellen. (Nicht online) Dabei habe ich mit dem Responsive Webdesign Probleme. Auf dem Smartphone, Tablet, Pc sieht die Seite gut aus. Jedoch, wenn ich das Browser-Fenster kleiner verschiebe, überlappen sich Bilder mit dem Text an einer Stelle. (Der Text ist speziell in Lists unterteilt.)

Hat mir jemand einen Rat? Die Bilder sind in Div-Boxen, der CSS Code dafür sieht ungefähr so aus:

    vertical-align: top;
    margin-right: xy
    margin-top: xy
    float: right;
    width: auto;

...zum Beitrag

CSS Hintergrundbild wird nicht angezeigt?

Ich mache grade eine Website, bei der oben im Header ein Hintergrundbild hinter dem Text stehen soll. Habe also ein div erstellt, eine Klasse gegeben und eine Höhe festgelegt. Wenn ich eine Hintergrundfarbe dort haben will, klappt es einwandfrei. Aber wenn ich ein background-image dort haben möchte, wird es im Browser einfach nicht angezeigt. Der Pfad stimmt, hab ihn schon mehrfach kontrolliert.

Wenn ich auf "untersuchen" klicke im Browser, wird auch dort im Code angezeigt, dass an der Stelle ein Hintergrundbild ist. Aber es wird einfach nicht angezeigt. Keine Ahnung, woran es liegt. Kann mir bitte jemand helfen?

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen