Bild in einem Parallax Container etwas abschneiden?

Moin,

ich habe eine Parallax Container direkt unter die Nav Bar eingefügt. Es sieht eigentlich recht hübsch aus, auch den Effekt mag ich.

Aber leider ist das Bild etwas hoch, so dass auf der Seite nur der obere Teil des Bildes angezeigt wird.

Kann man das Bild in einem Parallax beschneiden (also etwas vom oberen Teil des Bildes entfernen), oder das Bild zentrieren? Ich würde gerne die Mitte zu beginn sehen und dann diesen scroll Effekt haben. Das Bild sieht momentan wie mittig abgeschnitten aus. Der obere Teil wird angezeigt und der Untere ist nicht vorhanden.

Falls es hilft:

 <div class="parallax-container valign-wrapper">
      <div class="section no-pad-bot">
        <div class="container">
          <div class="row center">
            <h1 class="header col s12 light">TEST</h1>
          </div>
        </div>
      </div>
      <div class="parallax"><img src="img/pic.png"></div> 
    </div>

Style: .parallax-container { min-height: 380px; line-height: 0; height: auto; color: white; }

.parallax-container .section { width: 100%; }

@media only screen and (max-width : 992px) { .parallax-container .section { position: absolute; top: 40%; } #index-banner .section { top: 10%; } }

Es hat keinen tieferen Sinn, es ist grade nur eine Spielerei :)

Danke im Voraus.

1 Antwort

Steffile

23.02.2018, 13:47

Stell doch das Bild in .parallax als Hintergrundbild mit position:fixed ein, wie es alle tun? :) Dann kannst du auch background-position definieren.

Oder wenn du auf deine Methode bestehst, dann schneid das Originalbild so wie du es magst.

Ähnliche Beiträge

CSS Image wird nicht angezeigt?

CSS:
.top-banner {
  width: 100%;
  height: auto;
  background-size: contain;
  background: url("../img/start.jpg") no-repeat;
}

HTML:
 <div class="top-banner"></div>

Das Bild soll responsive angezeigt werden. Es liegt an dem height: auto;

gebe ich zum Beispiel eine feste height von 400px, wird es wieder angezeigt, ist aber natürlich nicht responsiv.

Gibt es da eine andere Möglichkeit, ein Image anzuzeigen, welches mitskaliert?

...zum Beitrag

HTML Navigation Bar Text Farbe ändern?

hey leude

Ich habe meine eigene Website gemacht, jetzt hab ich ein Problem ich möchte die Navigation bar den text dort in schwarz färben... habe schon bei css im header, nav, nav li probiert

CSS

.social-icons {
  text-align: center;
  }  
.social-icons li {
  display:inline-block;
  list-style-type:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  }
.social-icons li a {
  border-bottom: none;
  }
.social-icons li img {
  width:70px;
  height:70px;
  margin-right: 20px;
}

#wrapper {
    width: 960px;
    margin: center;
    font-family: arial, sans-serif
}
    
}

body {
    background-color: #8db6cd;
    
}

header {
    padding-top: 10px;
    padding-bottom: 10px;
    height: 125px;
    text-align: center;
    text-color: black;
}

nav {
    text-align: center;
     text-color: black;
    
}

nav li {
    display: inline;
    margin-right: 40px;
    text-color: black;
}

a {
    color: #777;
    text-decoration: none;
    font-family: arial, sans-serif
}



section {
    width: 620px;
    height: 530px;
    float: left;
    background: lightgray;
    border: 1px solid #000000;
}


aside {
    width: 310px;
    height: 550px;
    float: right;
    background: darkorange;
    border: 1px solid #000000;
}

...zum Beitrag

Wie kann ich das Rutschen des DIV-Containers verhindern?

Hallo, wie auf dem Foto (schlecht, rechts unten) zu erkennen möchte ich 3 DIV-Container nebeneinander platzieren.Dazu habe ich alle drei in ein großen Container gesteckt. Jedoch "rutscht" das rechte DIV immer nach unten ohne dass ich es möchte oder weiß wieso es das tut...Ich hoffe es kann mir hier geholfen werden!

CSS:

#body {
    background-color: aqua;
    width: 100%;
    height: 100%;
}


#mitte {
    height: inherit;
    max-width: 60%;
    background-color: aliceblue;
}


#links {
    width: 15%;
    height: inherit;
    float: left;
    background-color: brown;
}


#rechts {
    width: 15%;
    height: inherit;
    float: right;
    background-color: blueviolet;
}

Da HTML hier Probleme mit den < und > hat, davon ein Bild im Anhang...

Danke im voraus, Thomas

...zum Beitrag

Scrolling Effekt nur mit CSS, ohne JavaScript?

Wie bekomme ich diesen Parallax Scrolling Effekt

https://www.youtube.com/watch?v=TawH-AqHTXc

Meine Umsetzung: https://codepen.io/MrAmazing2/pen/dyMByNr

mit purem CSS hin??

Denn die JavaScript Version ist oft sehr ruckelig, da JS Asynchron läuft. Mit purem CSS wäre es aber immer flüssig. (Quelle)

Ich bin bereits auf das hier gestoßen: https://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/

Jedoch schaffe ich es nicht, das ganze in ein Div zu packen, und darunter weitere Divs/Sections zu plazieren, sodass es aussieht wie in meiner Demo. Stattdessen überlappt es sich, oder der Parallax-Part bekommt eine extra Scrollbar.

Sitze nun schon seit 15 Stunden daran und schaffe es einfach nicht. Bin aber auch CSS Neuling.

...zum Beitrag

Abstand nach oben entfernen <CSS>?

Hallo,

ich möchte den Abstand oben entfernen. Es funktioniert einfach nicht, egal was ich mache.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
    <H1>Willkommen auf meiner Webseite</H1>
</div>
    <script>
        function myFunction() {
           var element = document.body;
           element.classList.toggle("dark-mode");
        }
        </script>
        <button onclick="myFunction()">Toggle dark mode</button>
</body>
</html>

CSS:

body {
  padding: 0%;
  margin: 0%;
  background-color: white;
  color: black;
  font-size: 25px;
  width: 100%;
  height: 100%;
  
}
.dark-mode {
  background-color: black;
  color: white;
}
.box{
  justify-content: center;
  padding: 0%;
  margin: 0%;
  padding-top: 0%;
  margin-top: 0%;
  background-repeat: no-repeat;
  width: 100%;
  height: 6cm;
  background-image: url(img/web-1012467_1920\ \(1\).jpg);
}

Das wäre der Code, ich hoffe irgendwer kann mir helfen.

So sieht es aus:

Danke im voraus.

...zum Beitrag

HTML / CSS: div wird nicht angezeigt?

Ich fange gerade erst an und mein HTML-Code für div ist:

<body bgcolor="#333333">
  <div id="top"> </div>
</body>

und im CSS:

#top {
  background-color:aqua;
  width: 100%;
  height: 100px;
}

Aber wenn ich das im Browser angucken will, dann wird mir nichts angezeigt. Alles ist gespeichert und ich benutze Brackets. Davor hab ich es mit Atom ausprobiert, aber da funktioniert es auch nicht.

...zum Beitrag

CSS: Zwei Bilder nebeneinander zentrieren?

Hallo ich habe eine Seite gebastelt möchte zwei Bilder nebeneinder zentriert anordnen. Wie mache ich das?

Code html

<footer>
<img class = "social" src="facebook.png">
<img class = "social" src="twitter.png">
</footer>

Css

img.social {
float: middle;
display: block;
margin: auto;
width: 5%;
height: 5%;
}

...zum Beitrag

HTML CSS Website Footer wird im Container angezeigt, obwohl er nicht drin ist?

Hallo,

Ich "programmiere" gerade ein wenig mit HTML und CSS und baue eine Website mit einem Head, einer Main und einem Footer. Mein Problem ist, dass alle Elemente der Website nach der Main (bei mir heißt sie "Container") trotzdem noch innerhalb des Containers angezeigt werden. Somit ist bei mir der Footer im Container Main, obwohl der Container vorher schon geschlossen wurde.

-------------------------------------------------------------------------------------

HTML CODE:

<!DOCTYPE html>
<html>
 <head>
  <title>Aufgabe 1</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
  <header>
   <header1 class="item1">
    <h2>FeWos</h2>
   </header1>
  </header>
  <div" class="container">
   <div class="b1">
    <div>
     <h1>Item 1</h1>
    </div>
    <div class="bild1">
     <img src="pingu.png" width="50%" height="50%">
    </div>
   </div>
   <div class="b1"><br>Box 2</div>
   <div class="b1"><br>Box 3</div>
   <div class="b1"><br>Box 4</div>
   <div class="b1"><br>Box 5</div>
   <div class="b1"><br>Box 6</div>
  </div>
  <footer>
   <p>Hallo</p>
  </footer>
 </body>
</html>

----------------------------------------------------------------------------------------------------

CSS CODE:

body {
  margin: 0;
}
header {
  height: 120px;
  background-color: rgb(43, 43, 43);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.container {
  border: 3px solid;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 90px;
  padding: 90px;
}
.b1 {
  display: flex;
  background-color: rgb(93, 161, 224);
  width: 30%;
  height: 500px;
  flex-grow: 1;
  transition: transform 0.2s ease-out;
  border-radius: 20px;
}
.b1:hover {
  transform: scale(1.05);
}
.bild1 {
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  width: auto;
  height: auto;
}
footer {
  background-color: rgb(43, 43, 43);
  width: 100%;
  height: 120px;
  padding: 0px;
}

----------------------------------------------------------------------------

Wie man sehen kann wird der "container" mit </div> abgeschlossen, aber der Footer ist trotzdem im Container. Hoffe mir kann jemand bei dem Problem helfen.

Auf dem Bild kann man das auch ganz gut sehen. Das anthrazit farbige soll der Footer sein und dieser liegt innerhalb des Containers, welcher zur Sichtbarkeit eine Umrandung hat.
Würde mich echt freuen, wenn mir jemand weiterhelfen kann. Hab auch Chat GBT schon gefragt, aber Chat GPT sagt, dass der Code ganz normal ist und, dass der Footer nicht im Container ist.

...zum Beitrag

Wie kann man eine SVG-Datei in CSS nach links zentrieren?

Hallo,

ich möchte gerne eine SVG-Datei in meiner Webseite einbinden. Ich habe diese auch schon über <object> in HTML eingefügt.

Das object hat die Klasse Welt und ist in CSS hinterlegt. Dort habe ich width und height auf 75%. Nun wird mir die SVG aber so ziemlich mittig auf der Webseite angegeben.

Wie kann ich diese nach links positionieren, damit ich rechts z.B. einen Text scheiben kann?

HTML:

<object class="Welt" data="BluePlanet.svg" type="image/svg+xml"></object>

CSS:

.Welt {
  width: 75%;
  height: 75%;
}

Danke schon einmal im Voraus. :)

...zum Beitrag

css code für profilbilder?

weiss jemand was an diesem code falsch ist, da er nicht funktioniert! Er soll die Ränder vom Profilbild rund machen, wenn man mit der maus rüber fährt.

der code ist: /* Grundlegendes Styling für das Profilbild */

.profile-container {

display: inline-block;

overflow: hidden; /* Verhindert, dass das Bild über den Container hinausgeht */

}

.profile-img {

width: 100px; /* Standardgröße des Profilbildes */

height: 100px;

object-fit: cover; /* Bild so skalieren, dass es den gesamten Container ausfüllt */

border-radius: 10px; /* Anfangs leicht abgerundete Ecken */

transition: border-radius 0.3s ease, transform 0.3s ease; /* Weicher Übergang für den Hover-Effekt */

}

/* Effekt bei Hover */

.profile-img:hover {

border-radius: 50%; /* Vollständig runde Ecken beim Hover */

transform: scale(1.05); /* Leichtes Vergrößern des Bildes */

}

...zum Beitrag

Abstand zwischen zwei Div-Containern verhindern HTML?

Ich habe zwei Div-Container mit display: inline-block; padding: 0; margin: 0; aber es befindet sich trotzdem ein Abstand zwischen ihnen. Woran liegt das?

hoffe auf Hilfe,

Bohne47

...zum Beitrag

Content in die mitte packen html, css?

Ich arbeite an einem Discord bot Dashboard und ich möchte, dass die Kästchen vom <li></li> nicht untereinenander sind sondern neben einander bis zum bildschirm rand und dann eins runter gehen.

html:

 <ul>
  <li><a class="content"><button onclick='ping()'>Working?</button>   
  </a></li>
  <li><a class="content"><input type="text" id="invite" placeholder="server invite"></a>
  <a class="content"><button onclick="add_invite()">Join</button></a>
  <br></li>
  <li>
</ul>

Css:

html,
body{
    width: 90%;
    color: #FE72F3;


 background: #2B2B2B;
    height: 100%;
}
ul{
    list-style: none;
    width: 100%;
    height: 100%;
}
li{


    width: 320px;
    height: 220px;
    background: #494949;
    border: 2px solid #1d1c1c;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-top: 20px;
}
input{
    width: 90%;
    margin: 10px;
    height: 30px;
    border-radius: 5px;


}
button{
    width: 93%;
    margin: 10px;
    height: 35px;
    border-radius: 5px;
    
}

Wie mach ich das?

...zum Beitrag

Wieso wird mein Column nach einer Row nicht in Flutter angezeigt?

Hallo, ich habe ein Programm das so aussehen soll:

Ich habe diesen Code:

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.teal,
        body: SafeArea(
          child: Row(
            children: <Widget>[
              Container(
                width: 100,
                color: Colors.red,
              ),

              Column(
                children: <Widget>[
                  Container(
                    width: 100,
                    height: 100,
                    color: Colors.yellow,
                  ),
                  Container(
                    width: 100,
                    height: 100,
                    color: Colors.green,
                  ),
              Container(
                width: 100,
                color: Colors.yellowAccent,
                  ),
                ],
              ),
            ],
          )
          ),
        ),
      );
  }
}

Der letzte Container (yellowAccent) wird nicht angezeigt auf dem Emulator. Kann mir bitte jemand helfen?

Mfg Elias Brüggen

...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

Was möchtest Du wissen?

Deine Frage stellen