HTML: GIF über Bild im Hintergrund?

Mein Gif war eigentlich transparent und beides funktioniert einzeln. Aber wenn ich:

<body id="overlay" style="background-image:url(Name.png); background-attachment: scroll; background-image: url(Name.gif); height: 100vh; padding: 0; margin: 0;">

so eingebe (und die Namen sind natürlich anders, aber das ist jetzt auch egal), wird nur das Zweite angezeigt.

2 Antworten

glebkema

15.06.2020, 17:36

Sie können auch zwei oder mehr Hintergründe mithilfe der Eigenschaft "background-image" festlegen, wenn Sie sie wie folgt durch Kommas getrennt auflisten:

background-image: url(Name.png), url(Name.gif);

Die Eigenschaft "background-attachment" ist standardmäßig "scroll". Somit können Sie diesen Teil der Anweisung löschen.

Wenn Sie für jeden Hintergrund unterschiedliche Werte für die "background-attachment"-Eigenschaft festlegen wollen, können Sie diese auch mit einem Komma auflisten. Zum Beispiel:

background-attachment: scroll, fixed;

Außerdem können Sie die Eigenschaft "background" benützen, alle Eigenschaften in einem langen Wert festzulegen:

https://developer.mozilla.org/de/docs/Web/CSS/background

background: url(Name.png) scroll, url(Name.gif) fixed;

So kann Ihr Code folgendermaßen umgeschrieben werden:

<body id="overlay" style="background-image: url(Name.png), url(Name.gif); height: 100vh; padding: 0; margin: 0;">
</body>

Ich möchte auch darauf hinweisen, dass es oft bequemer ist, "min-height: 100vh;" anstelle von "height: 100vh;" zu verwenden. Dann kann sich das <body>-Tag in der Höhe dehnen, wenn sich viel Inhalt darin befindet und das Smartphone horizontal gedreht wird.

Woher ich das weiß:Beruf – Ich erstelle Wordpress-Themes, Plugins und Online-calculator

regex9

Community-Experte

PC, Computer, HTML

15.06.2020, 16:29

Dein zweites background-image-Property überschreibt das erste (CSS-Grundregel). Wenn du Bilder übereinander lagern möchtest, brauchst du ein zweites HTML-Element, welches auf dem / im body-Element liegt.

3 Kommentare 3

Nicocchi

Fragesteller

15.06.2020, 16:31

also am Ende beim zweiten Body?

regex9

15.06.2020, 16:37

@Nicocchi

Welcher zweite body? Jedes Dokument hat nur einen.

Beispiel:

<!-- doctype, head, etc. ... -->
<body style="background-image: url(...)">
  <div style="background-image: url(...);height: 100vh;width: 100%;"></div>
</body>

Oder vielleicht auch ausreichend:

<!-- doctype, head, etc. ... -->
<body style="background-image: url(...)">
  <img alt="Some image description" src="some-image.png">
</body>

Nicocchi

Fragesteller

15.06.2020, 17:00

@regex9

whoa, danke man. Da hab ich jetzt über einer Stunde dran genagt, das ist perfekt. Ich hatte zwar einennun einen funktionierenden, aber der war total umständlich und schlecht

Halloo, Eine Frage zu CSS, wie man im Titel schon erkennen kann :)

Undzwar habe ich folgendes Programm geschrieben:

html, body {
 margin: 0;
 padding: 0;
}

.hintergrund {
 background: url(bla.gif) no-repeat center center;
 background-size: cover;
 height: 350px;
 text-align: center;
}

So, mein Wunsch wäre es unter dem Gif noch die Hintergrundfarbe zu ändern.. Weiß jmd wie das funktioniert?

...zur Frage

Wie kann ich mit HTML/ CSS DIV Tags bündig an den Rand anpassen?

Ich habe folgendes Problem mit Html/Css. Ich möchte gerne einen div tag auf einer Website ganz oben ansiedeln. Das einzige Problem was ich dabei habe ist, dass ich es nicht bündig hinbekomme. Zwar schließen die Div Tags untereinander bündig ab, aber jeweils am Rand der Website bleibt ein Spalt über. Mit Margin & Padding klappt es leider auch nicht. Ein Beispiel Quelltext habe ich hier:

<head>
<style type="text/css">
#do {
background-color:grey;
height: 50%;
margin:0px;
padding:0px;
border:none;
}
#di {
background-color:red;
height: 50%;
margin:0px;
padding:0px;
border:none;
}
</style>
</head>
<body>
<div id="do">
Hallo
</div>
<div id="di">
Hallo
</div>
</body>

PS: Das ist nur ein Beispiel, welches mein Problem verdeutlichen soll. Ich hoffe ihr könnt mir helfen.

...zur Frage

Transparent background bei Photopea entfernen?

Ich möchte gerne wissen wie man dieses Transparent Background entfernt, da ich ein Image kopiert und eingefügt habe und zwar in ein anderes Bild, aber das Transparent bleibt. Kann mir bitte jemand sagen ob ich was falsches oder das beheben kann?

...zur Frage

Wie kann ich diese Navbar fixieren?

Hallo,

ich mache gerade meine erste Website und kenne mich noch sehr wenig mit HTML/CSS aus. Ich schaffe es leider nicht, dass meine Navigation beim runter scrollen oben fixiert bleibt. Wie kann man das ausschließlich mit HTML und CSS (also kein Javascript oder so) beheben?

Hier der HTML-Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Unser Shop</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>


<div class="topnav">
  <img src="test.png" alt="test" width="100" height="40" style="float:left; margin-right:25px;">
  <a class="active" href="index.html">Willkommen</a>
  <a href="products.html">Unsere Produkte</a>
  <a href="about-us.html">Über uns</a>
</div>


<div class="page">
<p> Willkommen! </p>
</div>




</body>
</html>

Und hier der CSS-Code:

body {
  background-color: green;
  margin: 0px;
}


/* Add a black background color to the top navigation */
.topnav {
  background-color: #333;
  overflow: hidden;
}


/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


/* Add a color to the active/current link */
.topnav a.active {
  background-color: #4CAF50;
  color: white;
}


.page {
  background-color: white;
  margin-right: 125px;
  margin-left: 125px;
  padding-bottom: 85%;
}

...zur Frage

scroll snap funktioniert nicht?

Hallo,

ich verstehe nicht, warum das hier nicht snappen will?

…
  <body style="scroll-snap-type: y proximity;">
    <div style="scroll-snap-align: start; height: 100vh; background-color: red;">x</div>
    <div style="scroll-snap-align: start; height: 100vh; background-color: blue;">x</div>
    <div style="scroll-snap-align: start; height: 100vh; background-color: green;">x</div>
…

Liegt es an meinem Browser?

MfG

...zur Frage

Wieso wird der CSS-Text nicht erkannt?

Hier meine HTML und CSS Datei:

body {
  background-image: url(images/background.jpg);
  background-size: 100%
}

.header {
  width: 100%;
  height: 80px;
  display: block;
  background-color: #101010;
}

.inner_header {
  width: 1000px;
  height: 100%;
  display: block;
  margin: 0 auto;
  background-color: red;
}

.logo_container {
  height: 100%;
  display: table;
  float: left;
}

.logo_container h1 {
  color: white;
  height: 100%;
  display:table-cell;
  vertical-align: middle;
  font-family: 'Montserrat';
  font-size: 32px;
{

.navigation {
  float: right;
  height: 100%;
}

.navigation a:last-child {
  padding-right: 0;
}

.navigation a li {
  display: table-cell;
  vertical-align: middle;
  font-size: 16px;
  color: white;
  font-family: 'Montserrat';
  height: 100%
}

Jetzt die HTML-Datei:

<html>
  <head>
    <link rel="stylesheet" type"text/css" href="style.css">
  </head>
  <body>
    <div class="header">
      <div class="inner_header">
        <div class="logo_container">
          <h1><span>FERRARI</span></h1>
        </div>
        <ul class="navigation">
          <a><li>Home</li></a>
          <a><li>About</li></a>
          <a><li>Store</li></a>
          <a><li>Cars</li></a>
        </ul>
      </div>
    </div>
  </body>                                                                                                         </html>

Mein Problem ist nun, dass:

.navigation {
  float: right;
  height: 100%;
}

nicht erkannt wird. Das heißt, im Editor verfärbt er sich nicht und der Abschnitt hat keine Auswirkung auf die Webseite. Was habe ich denn nun falsch gemacht?

...zur Frage

JS overlay schließen?

ich habe eine Problem mit meiner schließungs-funktion.

$('#overlay-contact').on('click', function(ev) {
    console.log(ev.target)
    if (ev.Target = $('#overlay-wrapper-contact')) {
        $("#overlay-contact").removeClass('show-overlay');
    }
});

die Class 'show-overlay' wird durch einen Button hinzugefügt

$('#toggle-btn-contact').on('click', function(){
    var elem = $('#overlay-contact');
    elem.addClass("show-overlay");
});

<div id="overlay-contact" class="overlay">
  <div id="overlay-wrapper-contact" class="overlay-wrapper">
    <div class="o_contact-form">    
      <form action="index_submit" accept-charset="utf-8">
        <textarea placeholder="Name:" name="Name"></textarea>
        <textarea placeholder="E-Mail:" name="E-mail"></textarea>
        <textarea placeholder="Anliegen:"></textarea>
      </form>
    </div>  
  </div>
</div>

#overlay-contact.overlay
display: none
position: fixed
height: 100vh
width: 100vw
background: $bg-color
z-index: 999

.overlay-wrapper
   display: flex
   margin: auto
   background: red
   padding: 25px

#overlay-contact.show-overlay
   display: flex

   .overlay-wrapper
      animation: slide-down 0.5s ease

das Problem ist das wenn ich außerhalb clicke geht das overlay weg (wie es ja soll), aber wenn ich innerhalb clicke geht es auch weg :/

hier noch als CodePen für (hoffentlich) bessere Übersicht

https://codepen.io/Ezio__/pen/JNevya

hoffe einer kann helfen :)

...zur Frage

CSS Animation vor Redirect?

Hallo, ich hatte schonmal so eine ähnliche Frage gestellt aber bekomme es einfach nicht hin. Nun hab ich eine kleine Testumgebung gebaut, in der ich folgendes möchte:

Die Eingangsanimation spielt sich automatisch ab wenn die Seite geladen ist. Klicke ich auf den Go-Button in der Mitte (Später sollte das bei jedem Button passieren der eine bestimmte Klasse hat) dann soll der Klasse "intro" die Klasse "animation_out" hinzugefügt werden. Nach einer bestimmten Zeit (Am besten händisch per Ms änderbar) soll dann erst der Redirect erfolgen.

Gibt es da eine EINFACHE Lösung für Anfänger wie mich?

XXXXXXXX_____HTML_____XXXXXXXX

XXXXXXXX_____CSS_____XXXXXXXX

body{
margin: 0;
padding: 0;
}

.intro{
width: 100%;
height: 100vh;
position: fixed;
z-index: 9999;
padding: 0;
background-color: #000;
overflow: hidden;
pointer-events: none;
-webkit-animation: animation_in 1s 1; /* Safari 4.0 - 8.0 /
animation: animation_in 1s 1;
animation-fill-mode: forwards;
}

@keyframes animation_in {
0% {height: 100%;}
100% {height: 20px;}
}

.animation_out{
-webkit-animation: animation_out 1s 1; /* Safari 4.0 - 8.0 /
animation: redirectanimationout 1s 1;
}

@keyframes redirectanimationout {
0% {height: 20px;}
100% {height: 100%;}
}

.testbutton{
position: absolute;
background-color: #000;
color: #fff;
width: 50px;
padding: 5px 0;
text-align: center;
float: 0 auto;
margin-top: 50vh;
margin-left: calc(50% - 25px);
}

...zur Frage

Bild im HTML/CSS verrutscht seitlich?

Hallo,

ich versuche ein Bild in voller Breite auf einer Webseite darzustellen, es soll dabei einen dunklen Farbverlauf unter sich haben.

Da sich die Seitengröße / das Bildschirm-Seitenverhältnis auch mal ändern kann, soll das "Dunkle" auch hinter dem Bild sein.

Nun wollte ich den Farbverlauf mit einem box-shadow abbilden und der ist am Rand eben um die Box und nicht gerade runter.

Also habe ich mir diesen Code hier ausgedacht:

<html>
<head>
<style>


#example {
    box-shadow: 0px 3vh 3vh rgba(0, 0, 0, 0.5);
    /*box-shadow: 0px 3vh 3vh rgba(0, 0, 0, 0.5), 0px -3vh 3vh rgba(0, 0, 0, 0.5); oben auch Schatten*/
    margin-left: -10vw;
    margin-right: -10vw;
    margin-top: 0px;
    margin-bottom: 6vh;
    padding-left: 10vw;
    padding-right: 10vw;
    padding-top: 0px;
    padding-bottom: 0px;
    boarder-left: 0px;
    boarder-right: 0px;
    boarder-top: 0px;
    boarder-bottom: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    padding-bottom: 2vh;
    left: 0px;
}
</style>
</head>
<body>
<div id="example">
    <img srchttps://thumbs.dreamstime.com/z/quadratisches-muster-38138270.jpgpg" style="width: 100vw; height: 100vw;"/>
</div>

</body>

Den kann man praktisch unter https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_box-shadow2 einsetzen und ausprobieren.

Ich hab also den Hintergrund, nebst Farbverlauf, 10% in der Breite erweitert und meinte mit dem Padding dann das Bild in die Mitte zu bekommen. Aber das klappt nicht, es landet zu weit rechts.

Woran liegt das und wie kann ich das vermeiden?

(Firefox Dev-Edition 66.0b1 (64-bit))

...zur Frage

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;
}

...zur Frage

Wie kann man in HTML einen Wrapper erstellen?

Das ist meine Menüleiste:

* {
  padding: 0px;
  margin: 0px;
}

#menu {
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  height: 40px;
  width:100% - 36px;
  background: #2d2d2d;
  padding-top: 2px;
  padding-left: 36px;
}

#menu ul li {
  list-style: none;
  color: #bbbbbb;
  font-size: 10pt;
  font-family: Arial;
  line-height: 27px;
  padding: 0 8px;
  display: inline;
  font-weight: bold;
}

#menu ul li:hover {
  color: #fff;
}

Darunter soll der Wrapper kommen.

...zur Frage

Wieso ist das Hintergrundbild nicht fixiert?

Hi Zusammen

In meinem Shop wollte ich ein Hintergrundbild einbauen, auf Desktop funktioniert es super aber auf Mobile überhaupt nicht. Ich habe background-attachment auf fixed gestellt, aber trotzdem zieht sich das bild über die ganze länge der Website und es ist nicht so wie auf Desktop.

Website: www.hyghassociation.org

Hier der Code:

body,

html {

background: url({{ 'background.jpg' | asset_url }});

background-color: #000;

-webkit-background-size: contain;

-moz-background-size: contain;

-o-background-size: contain;

background-size: contain;

background-position: center;

background-attachment: fixed;

}

@media only screen and (max-width: 749px) {

body {

background: url({{ 'mobile_background.png' | asset_url }});

-webkit-background-size: contain;

-moz-background-size: contain;

-o-background-size: contain;

background-size: 100% 100%;

background-position: center;

background-attachment: fixed;

Würde mich über Hilfe freuen :=)

...zur Frage

Wie bekomme ich es hin, dass es genauso wie im Bild aussieht mit css?

<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <style>
         .haupt1 {
         float: none;
         display: block;
         margin-bottom: 20px;
         width: 100%;
         padding: 30px;
         border-bottom-width: 0px;
         border-style: none;
         background-color: #D8D8D8;
         }
         .haupt2 {
         float: none;
         display: block;
         margin-bottom: 20px;
         width: 75%;
         padding: 30px;
         border-bottom-width: 0px;
         border-style: none;
         background-color: #D8D8D8;
         }
         .haupt3 {
         float: none;
         display: block;
         margin-bottom: 20px;
         width: 50%;
         padding: 30px;
         border-bottom-width: 0px;
         border-style: none;
         background-color: #D8D8D8;
         }
         .w1 {
         float: none;
         color: #BDBDBD;
         display:block;
         }
         .s1 {
         width: 65%;
         padding: 30px;
         border-bottom-width: 0px;
         border-style: none;
         background-color: #0B615E;
         }
         .a1 {
         width: 20%;
         padding: 30px;
         border-bottom-width: 0px;
         border-style: none;
         background-color: #FA8258;
         }
      </style>
   </head>
   <body>
   <p class="w1">100% Width</p>
      <div class="haupt1">
         <div class="s1">Section</div>
         <div class="a1">Aside</div>
      </div>
      <p class="w1">75% Width</p>
      <div class="haupt2">
         <div class="s2">Section</div>
         <div class="a2">Aside</div>
      </div>
      <p class="w1">50% Width</p>
      <div class="haupt3">
         <div class="s3">Section</div>
         <div class="a3">Aside</div>
      </div>
   </body>
</html>

...zur Frage

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.

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen