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 :=)

1 Antwort

steveac77

28.12.2020, 14:25

Leider ist deine Seite nicht aufrufbar. Ich denke mal, dein Problem ist, dass das Bild nicht in voller Breite angezeigt wird. Du solltest "background-size: contain" angeben anstelle von 100%. Dann wird automatisch die längere Seite des Bildes an die Seitenbreite angepasst.

Woher ich das weiß:Berufserfahrung

Ähnliche Fragen

Wechselndes Hintergrundbild in HTML?

Hallo, wie kann ich einen script in Html erstellen, sodass sich das Hintergrundbild ca alle 10 sekunden verändert. Ich habe das Hintergrundbild bisher im CSS definiert:

html{background: url(images/DSC_0601-01.JPG) no-repeat center center fixed;

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}

Wäre nett wenn mir da jemand helfen könnte :)

...zur Frage

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

...zur Frage

linien entfernen?

zwischen denn button sind so kleine linien. wie kan man die enfernen?

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/brands.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/all.min.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/brands.min.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/fontawesome.css">
    <link rel="stylesheet" href="fontawesome-free-6.4.2-web/css/fontawesome.min.css">

    <title>Document</title>
</head>
<body>
    
    <div class="container">
        <h1>Homepage</h1>
        <a href="https://youtube.com">
            <button class="youtube"><i class="fa-brands fa-youtube"></i> YouTube</button>
        </a>
        <a href="https://discord.com/channels/@me">
            <button class="discord"><i class="fa-brands fa-discord"></i> Discord</button>
        </a>
        <a href="https://github.com">
            
            <button class="github"><i class="fa-brands fa-github"></i> Github</button>
        </a>
    </div>



    
</body>
</html>

style.css

body {
background-image: url(background.jpg);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
background-color: rgb(136, 127, 127);
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
text-align: center;

}

.youtube {
    align-self: center;
    background-color: #f44336;
    font-size: 20px;
    padding: 14px 40px;
    border-radius: 8px;
    color: black;
    border: 2px solid black;
}

.discord {
    background-color: #738adb;
    font-size: 20px;
    padding: 14px 40px;
    border-radius: 8px;
    color: black;
    border: 2px solid black;
}

.github {
    background-color: #495057;
    font-size: 20px;
    padding: 14px 40px;
    border-radius: 8px;
    color: black;
    border: 2px solid black;
}

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

HTML / CSS Transition funktioniert nicht?

Hallo,

wie man oben lesen kann funktioniert die Verzögerung eines hover Effekts nicht. Egal was ich probiere der hover Effekt hat keine Verzögerung. Hier der Code, der verzögert sein soll:

{ width: 339px; height: 191px;

position:absolute;
z-index:13;
right: 65%;
bottom: 225px;
position: fixed;
background-image: url(../Bilder/C-ProgrammUn.png);

} #C:hover { background-image: url(../Bilder/C-Programm.png); }

Sorry falls unübersichtlich ist, GuteFrageNet matscht das leider.

Kann mir wer helfen? :D

Mfg TOminerTV

...zur Frage

Warum ist da ein weißer Rand?

Hey, ich habe eine Frage zu HTML.

Ich habe bis jetzt diese Navigationleiste erarbeitet, weiß jedoch nicht wieso dort ein weißer Rand ist?

Könnt ihr mir helfen?

Das ist der HTML Code:

<nav id="nav">
<ul>
<li class="current" style="white-space: nowrap;">
<a href="">Home</a>
</li>
<li style="white-space: nowrap;">
</li>
<li style="white-space: nowrap;">
<a href="">Neumöbellogistik</a>
</li>
<li style="white-space: nowrap;">
<a href="">Lager & Logistik</a>
</li>
<li style="white-space: nowrap;">
<a href="">Werkstatt</a>
</li>
<li style="white-space: nowrap;">
<a href="">Kontakte</a>
</li>
</ul>
</nav>

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

Und das der CSS code:

#nav {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: rgba(255, 255, 255, 0.95);
background-image: url("C:\Users\liam\Desktop\CT\Headerline.png");
width: 100%;
height: 3.25em;
line-height: 3.25em;
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
text-transform: uppercase;
cursor: default;
}
#nav ul {
position: relative;
z-index: 1001;
}
#nav li {
display: inline-block;
top: 0;
position: relative;
-moz-transition: top .15s ease-in-out;
-webkit-transition: top .15s ease-in-out;
-o-transition: top .15s ease-in-out;
-ms-transition: top .15s ease-in-out;
transition: top .15s ease-in-out;
}
#nav li > ul {
display: none;
}
#nav li a, #nav li span {
-moz-transition: background-color .075s ease-in-out, color .075s ease-in-out;
-webkit-transition: background-color .075s ease-in-out, color .075s ease-in-out;
-ms-transition: background-color .075s ease-in-out, color .075s ease-in-out;
transition: background-color .075s ease-in-out, color .075s ease-in-out;
position: relative;
display: block;
text-decoration: none;
color: #6b7770;
top: -6px;
padding: 6px 1.5em 0.25em 1.5em;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
outline: 0;
}
#nav li:hover, #nav li.active {
top: 3px;
}
#nav li:hover a, #nav li:hover span {
background: #C1CAC5;
color: #fff;
}
#nav li.active a, #nav li.active span {
background: #C1CAC5;
color: #fff;
}
#nav li.current a {
background: #b1ddab;
color: #fff;
}

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

Ich hoffe ihr könnt mir helfen!

...zur Frage

Bild im footer?

Guten Tag

Ich habe ein Problem mit einem Bild im footer (statt wie beim letzten Mal in der Navbar).

Mein HTML Footer:

<h3>Matthias<span>Heiniger</span></h3>

<a href="#">Bewerbung</a>

<a href="#">Projekte</a>

<a href="#">Workbooks</a>

<a href="#">Kontakt</a>

</p>

</div>

</footer>

Mein CSS Code für das Bild zum einfügen:

footer {

background-image: url(/03_HTMLCSS/01_Website/Bilder/VektorDesignElemente/png/UntenLnks2_1.png);

background-repeat: no-repeat;

background-size: 19%;

position: relative;

z-index: 1;

font-size: 25px;

padding: 0;

}

Momentan wird das Bild so angezeigt:

Mein Problem: Das Bild (Das Blaue Bild) möchte ich unten Links platzieren aber es geht nicht bis an den "Boden"

Vielen Dank für die Antworten

Freundliche Grüsse

...zur Frage

Bild mit GIF im Hintergrund?

Hallo,

ich bekomme es hin, eine einfache Schrift, mit einem GIF zu hinterlegen.

HTML:

<a href="Startseite.html">
  <h1 class="Blackseries">Blackseries</h1>
</a>

CSS:

.Blackseries {
  color: transparent;
  background-image: urlhttps://media.giphy.com/media/cM2jGL4t1azcHV83Ba/giphy.gif);
  background-position: center;
  -webkit-background-clip: text;
  font-size: 50px;
  font-family: Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif';
}

Allerdings würde ich jetzt gerne ein Bild benutzen, welches transparente Stellen hat. Diese transparenten Stellen sollen dann durch das GIF ausgefüllt werden.

Ich habe auch schon im WWW geschaut, trotzdem habe ich bisher noch nichts gefunden. Vielleicht habe ich auch falsch gesucht?

Hat jemand einen Code bzw. eine Seite, wo beschrieben wird, wie man so etwas machen könnte?

LG UpdateD

...zur Frage

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.

...zur Frage

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?

...zur Frage

Html / Css Text auf Header bzw. Div-Container Text über Hintergrund?

CSS formatiert die Schrift so, dass immer der ganze Querbalken über dem Hintergrund nicht transparent ist. Wie mache ich das? ** Siehe Grafiken **

h1 { font-family: arial, verdana, helvetica; font-size: 40px; font-weight: 200; }

header { position: relative; height: 200px; display: block; background-color: black;

} nav { width: 500px; height: 200px; background-color: aqua; }

...zur Frage

CSS rollender Ball mit Bild?

Guten Tag,

ich habe in CSS einen rollenden Ball programmiert. Dieser rollt auch ist aber unsichtbar obwohl ich ein background: url gesetzt habe.

.circle {
    display: block;
    width: 100px;
    height: 100px;
    background: url("logo.png");
    border-radius: 50%;
   
    -webkit-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    -moz-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    -ms-animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    animation: spin 1000ms linear infinite, moveLeftToRight 5s linear infinite;
    
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    
    position: absolute;
    left: 0;
  }

Das Bild gibt es und die Rotation auch, ist aber nicht wichtig.

...zur Frage

CSS background gif UND background color?

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

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

Was möchtest Du wissen?

Deine Frage stellen