Css background-image kleiner machen?

Wie kann ich bei css ein backrgound image kleiner machen?

2 Antworten

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, Technik, IT

04.05.2022, 14:16

Die Größe von Hintergrundbildern und -grafiken kann über die Eigenschaft background-size verändert werden. Sei es über "einen" Wert oder mithilfe der Schlüsselwörter auto, contain und cover.

CSS:

selector {
  background-image: url('path/image.jpg');
  background-size: 30rem auto;
}

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

Woher ich das weiß:Berufserfahrung – UI/UX Designer, Full-Stack Developer

Von Experte MrAmazing2 bestätigt

TechPech1984

Nutzer, der sehr aktiv auf gutefrage ist

im Thema Computer

04.05.2022, 14:12

mit der größenangabe

https://www.w3schools.com/cssref/css3_pr_background-size.asp

background-size: 300px 100px;

Sher1ock

Fragesteller

04.05.2022, 14:14

Thx

Ähnliche Fragen

Hintergrundbild in HTML anpassen?

Hab neu mit HTML und css angefangen...

Ich möchte zum Anfang als Startprojekt sowas wie einen Lebenslauf gestalten und will eben ein bestimmtes Bild als Hintergrundbild.

background-image: url('thumb2-flag-of-bern-4k-swiss-canton-silk-flag-silk-texture.jpg');
background-repeat: no-repeat;

so steht es in meiner CSS, das passt auch nur ist es nur auf dem Viertel des Bildschirms. Was muss ich noch dazuschreiben damit es 1. nur ein Bild ist und nicht wiederholt wird und es sich an die Tabgröße anpasst?

...zur Frage

Css/Tailwind background image?

Warum wird mir das Bild nicht angezeigt?

...zur Frage

Text über Bild anzeigen lassen? Webdesign?

Hallo,

ich würde gerne auf einer Internetseite Text auf einem Hintergrundbild anzeigen lassen.

Das Bild habe ich über CSS mit background-image: url(Bildname); eingefügt. Den Text normal mit HTML. Der Text wird zwar jetzt auch auf dem Bild angezeigt, allerdings mit einem weißen Hintergrund mitten im Bild (siehe Bild). Der Text soll aber natürlich ohne diesen Hintergrund angezeigt werden.

Da ich noch relativer Anfänger bin und nicht weiter weiß, hoffe ich erstmal hier auf Hilfe.

Danke im Vorraus.

...zur Frage

HTML projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

...zur Frage

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?

...zur Frage

CSS Abstand um das Element entfernen?

Hallo,

Also ich wollte ein header erstellen, der in html so aussieht:

<div class="versand">
    <p>Versand ab 59€ Frei</p>
</div>

Nun hab ich ihm, folgende css eigenschaften gegeben:

.versand {
    color: white;
    text-align: center;
    background-color: black;
    width: 100%;
    height: 50px;
}

Warum ist jetzt ganz oben immer noch ein Abstand über dem Element?

...zur Frage

Transition des Background Images in CSS?

.btn{
    border-color: rgb(0, 153, 255);
    border-style:solid;
    color: black;
    align-content: center;
      flex-direction: column;
      margin: 20px;
      padding-right: 5em;
      padding-left: 5em;
      padding-top: 0.1em;
      padding-bottom: 0.1em;
      border-radius: 20px;  font-family: "Roboto", sans-serif; 
      text-align:center;
    text-decoration: none;
    cursor: pointer; 
    float: left;
    transition: 0.5s;
    overflow: hidden;
}

.btn:hover{
    transition: 0.5s;
    background-image:-webkit-linear-gradient( top left, rgba(0, 153, 255, 0.5), rgba(6, 125, 204, 0.5));
    color: white;
}

...zur Frage

css hover effekt geht nicht...warum?

Ich bin gerade am html/css/php lernen und bin auf ein total simples Problem gestoßen, welches ich aber bei bestem willen nicht gelöst bekomme.

Die Pseudoklasse :hover will einfach nicht tun....

Das ist die style.css.

.navigation_schrift{
    display:block;
    float:left;
    text-align: center
    font-family: courir;
    font-size:150%;
    width: 100%;height:40px;
    color: red;
    background-image: url("../images/aquabutton1.gif");
    margin: 0px 0px 3px 0px;
    text-decoration:none;
}

.navigation_schrift:hover{
    color: green;
}

und so wird das ganze aufgerufen:

Testtext

Alles andere was ich über CSS mache funktioniert einwandfrei (wenn ich es richtig gemacht habe :D)

Warum wechselt die Schriftfarbe bei mouseover nicht auf grün?

Ich habe sowohl Firefox 5.0.1 als auch IE9 versucht...

Gruß BluBb_mADe

...zur Frage

CSS header nimmt nicht volle breite?

Hallo,

Also ich hab einen Header erstellt, mit folgendem HTML Code:

<header>
    <p>Jetzt auch mit KLARNA zahlen!</p>
</header>

CSS Code:

 header {
    display: flex;
    justify-content: center;
    color: white;
    align-items: center;
    background-color: rgb(102, 102, 102);
    height: 40px;
    margin: 0;
    padding: 0;
    width: 100%;
}

Aber wenn ich nun mir mal per Untersuchen, die Webseite anschaue:

Dann sieht man, dass der header ab einem gewissen zeit punkt nicht mehr die volle breite nimmt. Warum?

...zur Frage

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

Bild in CSS formatieren?

Hallo,

ich habe ein kleines Problem:

Auf meiner Webseite gibt es ganz oben ein Bild, welches mit

background-image:

gesetzt wird. Doch es wird nicht der obere leere Linke Rand angezeigt. Kann ich das Bild irgentwie kleiner machen damit alles angezeigt wird? Z. B.:

background-image: 200px 200px url(“../img/image.jpeg”)

...zur Frage

Warum kann ich meinen Tabellenrahmen mit CSS nicht entfernen?

Moin,

ich habe mir in HTML eine Tabelle zurechtgebastelt und mit CSS designed. Da das Projekt recht umfangreich und unübersichtlich ist, ist es schwierig, den Code hier zu zeigen. Jedenfalls funktioniert in CSS die Funktion border-collapse sowie background-color, aber bezüglich des Rahmens funktioniert ansonsten nichts. Ich kann die Farbe, den Style und die Width nicht anpassen. Ziel ist den Rahmen zu entfernen, das funktioniert aber weder mit border-width: 0px; noch mit border: 0;.

Ich habe absolut keine Vorstellung woran es liegen kann, das CSS teilweise funktioniert. Cache habe ich immer gelöscht.
Außerdem habe ich es über table als Selektor sowie über die id mit # versucht, bei beiden ist das Ergebnis gleich,

Hat jemand eine Idee, was der Fehler sein könnte?

LG und vielen Dank

Tim

...zur Frage

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

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

Was möchtest Du wissen?

Deine Frage stellen