Hintergrundbild weg machen bei Responsive Webdesign?

Hallo,

Meine Website hat ein Hintergrundbild und ich möchte das dass bei einer bestimmten Größe aufhört angezeigt zu werden und das dann es in die Farbe des Body tags wechselt. Ich habe schon gegooglet doch leider ohne erfolg!

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

body {

?????( wie kann ich das machen)?????

}

Danke schon mal im voraus!

2 Antworten

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

PC, Computer, HTML

16.05.2020, 01:05

Den Hintergrund kannst du mit dem background-Property definieren.

body {
  background: url("some/path/to/an/image.jpg");
}

@media screen and (max-width: 520px) {
  body {
    background: #ff0000;
  }
}

Den Farbwert müsstest du bei dir noch austauschen. Im Snippet beschreibt er die Farbe rot. Mögliche Wertangaben werden hier genauer beleuchtet.

PlexxMc

Fragesteller

16.05.2020, 01:07

leider geht das nicht :/

regex9

16.05.2020, 01:08

@PlexxMc

Doch, das geht hervorragend.

Demo: https://jsfiddle.net/hu3rbf78/

PlexxMc

Fragesteller

16.05.2020, 01:13

@regex9

Ahh jetzt hat es geklappt danke!

Ceeesy759

16.05.2020, 00:58

body {
 background-image: url("img/bg.png")
}

PlexxMc

Fragesteller

16.05.2020, 00:59

ja aber ich möchte das dass Bild dann weg geht

Ceeesy759

16.05.2020, 01:01

@PlexxMc

Es wird ja nur bis max. 520 Pixel angezeigt. Also ist es bei großen ja logischerweise weg.

PlexxMc

Fragesteller

16.05.2020, 01:03

@Ceeesy759

Nein also ich habe ein Hintergrundbild und ich möchte das dass bei 520px aufhört angezeigt zu werden

Ähnliche Fragen

CSS @media Maximum Width überschreiben?

Guten Morgen,

mein Vater hat eine Website auf MyWebsite von IONOS. Er hat dort einen Buchungskalender, der unter 1025 Pixel Weite nicht angezeigt wird aufgrund folgenden CSS Codes;

@media screen and (min-device-width: 1024px) {
            .mediumScreenDisabled { display:block }
            .smallScreenDisabled { display:block }
        }
        @media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } }
        @media screen and (max-device-width: 568px) { .smallScreenDisabled { display:none } }
                @media screen and (min-width: 1024px) {
            .mobilepreview .mediumScreenDisabled { display:block }
            .mobilepreview .smallScreenDisabled { display:block }
        }
        @media screen and (max-width: 1024px) { .mobilepreview .mediumScreenDisabled { display:none } }
        @media screen and (max-width: 568px) { .mobilepreview .smallScreenDisabled { display:none } }

Der @media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } } -Teil verhindert das Anzeigen des Kalenders und möchte deshalb die maximale width ändern.

Allerdings gibt es auf MyWebsite selbst wohl keine Option dazu und der IONOS Support meint, dass sie für Drittanbieter Snippets keinen Support anbieten (dabei bin ich mir ziemlich sicher, dass das von denen kommt, da der Kalender in einem iframe eingebunden ist).

Gibt es eine Möglichkeit über CSS die Eigenschaft separat nochmal zu überschreiben, wenn ich das Snippet von oben nicht manipulieren kann?

Danke und LG

...zur Frage

Media Queries im iFrame nutzen

Hallo,

folgendes möchte ich bewerkstelligen:

Ich möchte eine responsive Seite in einem externen iframe einbinden. Ich habe KEIN Zugriff auf das iframe, sondern wirklich nur auf meine Seite die in diesem liegt. Das iframe hat eine feste Größe und ist nicht änderbar oder im vorstehenden code zu manipulieren.

Jetzt möchte ich gerne, dass sich einige Elemente auf meiner Seite im liegenden iframe je nach Größe des Browserfensters verändern.

Gibt es überhaupt ein media querie Befehl welches das tatsächliche Browserfenster beachtet und nicht zwangsläufig die iframe Größe (die ich nicht verändern kann)?

bisher getestet:

@media (min-width:450px) and (max-width:900px) { #main_wrapper { background-color: #FF0000 !important;} }

oder

@media only screen and (max-width : 900px) { #main_wrapper { background-color: #FF0000 !important;} }

Vielen Dank im Voraus.

Grüße Tim

...zur Frage

Blazor @media?

Guten Abend,

irgendwie funktioniert @media bei mir nicht.
ich nutze das Web Framework Blazor.

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }

Mit freundlichen Grüßen

...zur Frage

CSS Media query geht nicht richtig?

hallo,ich habe folgendes Problem: Wenn ich bei meiner Website mit CSS per Media query eine responsive Website machen möchte, geht das nicht richtig. Ich muss bei max- und min-width mindestens 1000px eintragen, damit es funktioniert. Kann mir bitte jemand helfen?

...zur Frage

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;

...zur Frage

HTML Img responsive overflow?

Hallo Liebe Community,

ich habe eine kurze Frage. Ich habe in meinem

HTML Code ein img eingefügt und es mittig zentriert und die breite auf 100% gesetzt. Zudem ist dieses Bild 100vh hoch. Sobald ich die Seite kleiner mache vergrößert sich das Bild, da die 100vh ja gefüllt werden müssen. Soweit so gut. Nun wenn ich auf Safari oder Chrome auf das responsive tool gehe, öffne ich zb die Ansicht eines iPhones und kann immer bei dem img ein Stückchen nach rechts scrollen. Scroll ich aber 100vh runter, richtet sich die Seite wieder mittig aus also springt wieder zurück. Ich hab’s versucht mit overflow hidden und max width 100% im html Bzw Body css aber nichts von beiden hat funktioniert. Wie behebe ich das?

vielen Dank im Voraus

...zur Frage

DE Sonderzeichen Fehler in HTML?

Hi,

ich sitze momentan an einer Datei, um ein paar Dinge auszuprobieren. Ich habe die Meta-Tags wie gewohnt aus einer anderen (funktionierenden) Datei kopiert.

Nun werden allerdings ausschließlich in meiner Datei die Umlaute wie Ä,Ö,Ü und ß mit

"�"

angezeigt. Auch das rein-kopieren Tags aus anderen Dateien, oder das entfernen des Stylesheets hat nix geändert. Kurzzeitig hatte ich auch den Meta-Tag:

mit reingenommen, allerdings ohne Erfolg oder Veränderungen. Auch das Debugging von W3C hat nix auffälliges gefunden:

Für alle helfenden Hände großes Danke!

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="example, html, head, meta">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="formate.css">
    <title>Das Box-Modell</title>
  </head>


<body>
  <header>
      
    <div class="flex">
     <img src="bilder/logo.svg" alt="logo">
    </div>
    
     <h1>Wilkommen auf der Test-Seite!</h1>
     <nav>
              <a href="#link_1.html">Blog</a>
              <a href="#link_1.html">Unterseite 1</a>
              <a href="#link_1.html">Unterseite 2</a>
              <a href="#link_1.html">Kontakt</a>
     </nav>
          
    </header>
      
      <main>
          
          <h2>ÜÜÜCCS-basierte Layouts <br><br />HTML-Struktur ohne CSS</h2>         
          
      </main>
    
    
    
    <footer>
     <a href="kontakt.html">Kontakt</a>
     <p>&copy; 2024 by GTA1A</p>
    </footer>


</body>
</html>

...zur Frage

CSS: Wie kann ich Karten gleich groß anzeigen?

Guten Tag,

ich habe einen kleinen Design-Bug in meiner Webseite.

(s. Bild)

Wie kann ich dieses Problem lösen?

Mein CSS:

<style>
.item {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 10%;
  border-radius: 5px;
  background: #191c29;
  color: rgb(88 199 250 / 100%);
}
.con {
  background: #adadad;
  overflow: auto;
  overflow-x: hidden;
  background: #212534;
}

.item:hover {
  box-shadow: 0 16px 32px 0 rgba(250,250,250,0.2);
}
img {
  border-radius: 5px 5px 0 0;
  height: 150px;
	width: 100%;
}
.container {
  padding: 2px 16px;
}
body {
  overflow: hidden; 
}


* {box-sizing: border-box;}


body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}




* {
  box-sizing: border-box;
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
#flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
.item {
  float: left;
 /* width: 25%; */
  width: 15%; /* 10%*/
  height: 50%; /* 50% */
  padding: 20 10px;
  margin-bottom: 20px;
  margin-left: 20px;
  margin-right: 20px;
}
.row {
  margin: 0 -5px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.col-sm {
  text-align: center;
}
/* @media screen and (max-width: 600px) { */
@media screen and (max-width: 800px) {
  .item {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}
.text-center {
  text-align: center;
}
</style>

Der Code von einer Karte:

<div class="row">
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
<div class="item text-center">
  <div class="col-sm">
    <img src="textures/spawner.png" alt="textures/spawner.png" style="width: auto;">
    <div class="container">
      <h4><b>Spawner (*1)</b></h4>
      <p>Preis: 10 Mio Coins</p><p></p>
    </div>
  </div>
</div>&nbsp;
</div>

Danke für jede Hilfe. Ich weiß, dass der CSS-Code nicht der schönste ist, allerdings lerne ich die Sprache noch!

...zur Frage

CSS: Items untereinander sortieren?

Hallo zusammen,

ich brauche etwas Hilfe mit CSS. Ich habe mir mit HTML ein Div erstellt, und ein paar Social Media Buttons reingepackt:

<div class="social-media-buttons">
<a class="btn" href="https://github.com/dominikdev-m">
<i class="fab fa-github"></i>
</a>
<a class="btn" href="https://twitter.com/DominikMiskovi7">
<i class="fab fa-twitter"></i>
</a>
<a class="btn" href="https://instagram.com/dominik_rxb">
<i class="fab fa-instagram"></i>
</a>
</div>

Dann habe ich mit CSS versucht diese Social Media Buttons untereinander zu sortieren, falls der Nutzer auf einem Gerät ist das maximal 400 Pixel breit ist:

@media only screen and (max-width: 400px) {
    .social-media-buttons {         display: inline-block;     }

Leider funktioniert der CSS Code nicht, die Buttons werden irgendwie komisch sortiert auf dem Smartphone und nicht untereinander. Könnt ihr mir sagen was ich falsch gemacht habe?

Danke im Voraus.

LG, Dominik

...zur Frage

navbar logo in die mitte?

Bin gerade dabei Für einen Freund eine Website zu erstellen jedoch ist es das erste mal das ich ein logo in die Mitte machen muss und ich komm mit nichts weiter.. Tutorials.. w3schools.. etc

html

	<div class="topnav">
	


  
  <div class="topnav-centered">
		  <a class="topnav-centered" href="#home">
            <img src="https://cdn.discordapp.com/attachments/807683377137844285/1036024148855627786/Strixley_Ruffy_2.png" width="85px;"	height="80px;" class="img-fluid">
	
</a> 
  </div>


 
  <a href="#about">Über</a>
  <a href="#gamemodes">Gamemodes</a>


  
  <div class="topnav-right">
  
    <a href="#shop">Shop</a>
    <a href="#staff">Team</a>
  </div>


</div>
</div>

css

.topnav {
	position: relative;
	list-style-type: none;
    overflow: hidden;
    background-color: #181818;
    box-shadow: 0px 6px 13px -7px rgba(0,0,0,0.20);
    transition: all .2s ease-in;
    font-weight: 700;
    text-transform: uppercase;
}


.topnav a {
  float: left;
  color: white;
  text-align: top;
  align-items: start;
  padding-top: 30px;
  padding-right: 100px;
  padding-bottom: 30px;
  padding-left: 100px;
  text-decoration: none;
  font-size: 20px;
}


.topnav a:hover {
  color: #5205ed;
}


.topnav-centered a {
  float: none;
    display: inerhit;
    right: 50%;
    left: 50%;
    transform: translate(-50%, 50%);
}


.topnav-right {
  float: right;
  align-items: end;
}


.right {
  justify-content: flex-start;
}


.left {
  justify-content: flex-end;
}


@media screen and (max-width: 600px) {
  .topnav a, .topnav-right {
    float: none;
    display: block;
}
	.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
	}
}


@media screen and (max-width: 800px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}


@media screen and (max-width: 800px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: center;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: right;
    display: inline-block;
    text-align: left;
  }
}


@media screen and (min-width: 800px) {
  div .max-width {
    max-width: 60%;
    margin: 0 auto;
    box-shadow: none;
  }
}


	.topnav-centered a {
    position: relative;
    top: 0;
    left: 0;
    transform: none;
	}






body {
  padding: 0px;
  background-image: linear-gradient(rgba(24, 24, 24, 1), rgba(14, 14, 14, 1));
  color: black;
  font-size: 20px;
}

...zur Frage

Div Box ragt über Rand hinaus?

Hallo, mein Problem ist, dass wenn ich das Browserfenster verkleinere die Div über den Rand geht. Perfekte Lösung wäre, wenn der Text dann unter dem Bild erscheint, sobald er zu klein für das Fenster ist. Code:


                <div id="produkte">
                    <figure class="produkt">
                        <a href="#schuh">
                            <div class="bild">
                              <img src="bilder/schuh.jpg" alt="Schuh"></div>
                            
                            <figcaption class="beschreibung">
                            <strong>Nike Air - 790€</strong>
                            <p>Toller Schuh mit dicker Sohle und guter Federung, wird meistens als Lauf- bzw. Freizeitschuh verwendet.</p>
                            </figcaption>
                        </a>
                    </figure>
                    <figure class="produkt">
                        <a href="#schuh">
                            <div class="bild">
                              <img src="bilder/schuh.jpg" alt="Schuh">
                    </div>
                            
                            <figcaption class="beschreibung">
                            <strong>Nike Air - 790€</strong>
                            <p>Toller Schuh mit dicker Sohle und guter Federung, wird meistens als Lauf- bzw. Freizeitschuh verwendet.</p>
                            </figcaption>
                        </a>
                    </figure>
                    <figure class="produkt">
                        <a href="#schuh">
                            <div class="bild">
                              <img src="bilder/schuh.jpg" alt="Schuh">
                            </div>
                            
                            <figcaption class="beschreibung">
                            <strong>Nike Air - 790€</strong>
                            <p>Toller Schuh mit dicker Sohle und guter Federung, wird meistens als Lauf- bzw. Freizeitschuh verwendet.</p>
                            </figcaption>
                        </a>
                    </figure>
                </div>
  } 
  @media screen and (min-width: 751px){
    #produkte {
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column;
    }
}
    .produkt {
        width: 700px;
        border: solid #e4e4e4;
        background-color: white;
        padding: 10px;
        margin: 20px;
        height: 200px;
        text-align: left;
        height: 200px;    
    }
    .produkt img {
        width: 180px;
        padding: 15px;
    }
    a {
        font-size: x-large;
        color:#3f79e6;
        display: flex;
        text-decoration: none;
}
    @media screen and (max-width: 750px){
      #produkte {
          display: flex;
          flex-direction: column;
          align-items: center;
          max-width: 100%;
          height: auto;
      }
      .produkt a {
          display: flex;
      }
    }

...zur Frage

Wie kann man Bilder vergrößern (html/css)?

Ich habe zurzeit das Problem das ich ein Bild nicht vergrößern kann. Ich will, dass das Bild auch auf denn handys richtig zu sehen ist, deswegen will ich es ab 400px vergrößern. Könnte mir da jemand helfen? (Bin ein Anfänger)

Code in html -

Code in css -

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

.img45 .links{

width: 300px; (habe es auch mit % probiert)

}

...zur Frage

Html/CSS Text neben Bild?

Hallo, ich arbeite seit ungefähr drei Monaten mit html und habe jetzt ein Problem: Ich will einen Text neben mein Bild platzieren, doch immer wenn ich alles nach links floate zerstört das meine navigationsleiste. Möchte noch anmerken, dass meine Skills zu diesem Thema ziemlich beschränkt sind. Hier findet ihr mein CSS - unten html. Danke für eure hilfe! 😊

.topnav {

background-color: rgb(245, 245, 245);

overflow: hidden;

}

.topnav a {

float: left;

display: block;

color: #1d1d1d;

text-align: center;

padding: 14px 16px;

text-decoration: none;

font-size: 17px;

}

.topnav a:hover {

background-color: #ddd;

color: black;

}

.topnav a.active {

background-color: #3f79e6;

color: white;

}

.topnav .icon {

display: none;

}

@Media screen and (max-width: 600px) {

.topnav a:not(:first-child) {display: none;}

.topnav a.icon {

float: right;

display: block;

}

@Media screen and (max-width: 600px) {

.topnav.responsive {position: relative;}

.topnav.responsive a.icon {

position: absolute;

right: 0;

top: 0;

margin-left: 30px;

}

.topnav.responsive a {

float: none;

display: block;

text-align: left;

}

@Media screen and (min-width: 601px){

#produkte {

margin-left: 20%;

float: left;

}

.produkt {

width: 200px;

border: solid #dedcd9;

background-color: #f6f8fa;

padding: 10px;

margin: 20px;

display: block;

text-align: right;

height: 200px;

}

.produkt img {

width: 180px;

padding: 10px;

display: block;

}

p, a, h1, h2, h3, h4, h5, h6 {

font-family: Arial, Helvetica, sans-serif;

font-display: block;

}

a {

font-size: x-large;

color:#3f79e6;

}

Das ist mein html:

<!DOCTYPE html>

<head>

function myFunction() {

var x = document.getElementById("myTopnav");

if (x.className === "topnav") {

x.className += " responsive";

} else {

x.className = "topnav";

}

</script>

</head>

<body>

<a href="#contact">Contact</a>

<a href="#about">About</a>

</a>

</div>

<div class="desc"><a>Nike Air</a></div><p>Toller Schuh mit dicker Sohle und guter Federung, wird meistens als Lauf- bzw. Freizeitschuh verwendet.</p>

</div>

</body>

</html>

...zur Frage

Custom CSS Wordpress einzelne Seiten ausschließen?

Hallo, wie kann ich das Wordpress CSS nur für einzelne Seiten einstellen. Hab schon bisschen was zusammengebastelt. Danke für eure Hilfe!

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

#primary .content-container {

padding-left: 10px !important;

padding-right: 10px !important;

}

{display:none}

.postid-3701,

.postid-3712,

.postid-3731,

.postid-3736,

.postid-3748,

.postid-2583,

.postid-3756,

.postid-3752,

.postid-3703

{display:none}

}

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen