Html css Hintergrundbild ausfüllen?

Hi, mein hintergrundbild wird nicht ganz ausgefüllt und fängt automatisch am Rand neu an (wiederholt sich)

Mit background repeat bin ich irgendwie nicht so weit gekommen, kann mir da bitte jemand helfen?

Bild zum Beitrag

Auf dem Bild sieht man das das Bild neben von neu anfängt

Danke

5 Antworten

verreisterNutzer

15.08.2020, 00:42

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

background-size: cover;

Sollte passen. Ansonsten probier die Parameter durch. Beachte auch welch css Eigenschaften von welchem Browser unterstützt wird.

Anonymous100000

Fragesteller

15.08.2020, 01:19

Danke ^^

verreisterNutzer

15.08.2020, 06:23

@Anonymous100000

Wenn es dir geholfen hat, kannst du auch gerne "Hilfreich" und "Danke" anklicken 😉

Anonymous100000

Fragesteller

15.08.2020, 12:54

@verreisterNutzer

👍

brudermusssoos

15.08.2020, 00:14

Hast du es schon mit width: 100% probiert?

Winfimet

15.08.2020, 13:06

Mach den width im body auf 100% und das bild auf cover mit background-size.

Wenns nicht klappt, dann schick mal den code

Steffile

15.08.2020, 00:14

Background-size: cover

sollte das loesen.

MagisterSamael

15.08.2020, 00:14

background-size: cover;

Sollte das Problem lösen, wenn ich richtig verstanden habe.

Woher ich das weiß:Berufserfahrung

Anonymous100000

Fragesteller

15.08.2020, 00:35

Ne hilft nicht

Ä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

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

XHTML background?

Bei XHTML würde ich gerne ein Hintergrundbild einfügen, dass sich NICHT wiederholt OHNE CSS zu nutzen.

...zur Frage

Wie diesen Rand html, css entfernen?

Hey, wie ihr im Bild sehen könnt ist da ein Rand, der nicht da sein sollte. Kann jemand helfen?

body {

overflow-x:hidden;

background-image:linear-gradient(45deg,grey, rgb(66, 66, 66), blue, green, red, black,yellow, rgb(44, 129, 232));

width: 100%;

}

...zur Frage

Warum funktioniert mein @font face nicht?

Ich steh auf dem Schlau, erkennt einer das Problem?

Mein Fontface css:

@font-face {
    font-family:"Conduit-Medium";
    src: url('fonts/Conduit-Medium.eot');
    src: url('fonts/Conduit-Medium.otf') format('opentype');
    font-style: normal;
}

Mein css Kopf:

body {
    background-repeat: no-repeat;
    background-color: #009ee3;
    font-family: "Conduit-Medium", serif;
}

...zur Frage

Wie kann ich ein Foto in einer CSS oben links in die Ecke machen?

Moin, ich möchte ein Bild in meiner CSS oben links in die Ecke machen, damit das auf jeder Seite so ist.

Der Code für meine HTML:

<!doctype html>
<html>
<head>
<title>Informatik</title>
<link href="Kurz.css" rel="stylesheet" type="text/css">
</head>
<body>
<footer></footer>
<script language="javascript" type="text/javascript" src="Footer.js"></script>
</body>
</html>

Der Code für CSS:

html {
  height: 100%;
}
body {
 background-image: url("Bilder/getraenkeguenther.jpg");
 background-repeat: no-repeat;
 background-position: left top;
 min-height: 100%;
 margin: auto;
 display: flex;
 flex-direction: column;
}
footer {
  margin-top: auto;
  height: 200px;
  text-align: center;
background-color: deepskyblue;
}

Der Code der JS:

var footer = `
<a>Impressum</a>
`;
document.getElementsByTagName("footer")[0].innerHTML = footer;

Das backgroundimage soll quasi als einzelnes Bild oben links in die Ecke

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

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

Dynamic Web App und Thymeleaf CSS einbinden?

Moin.

Statt JSP wollte ich ich nun Thymeleaf umschwenken. Allerdings hab ich bei Thymeleaf Probleme, die CSS Datei einzubinden. Meine Recherchen haben ergeben, dass Thymeleaf von Haus aus in src/main/resources/static/ nach Ressourcen sucht. Die hab ich auch da reingepackt. css/style.css

Mein HTML Dokument sieht die Verlinkung Folgendermaßen aus:

 <link th:href="@{/css/style.css}" rel="stylesheet" />

Meine HTML Seite befindet sich direkt im webapp Ordner.

Ich hab auch versucht die HTML Seite in den templates Ordner zu packen. Leider ebenfalls ohne Ergebnis.

Pro Forma der CSS Inhalt :)

body{
	background-color: red;
}

Hier auch mal ein Bild von der Ordnerstruktur:

...zur Frage

[HTML] Chrome zeigt Hintergrundbild nicht an, IE schon

Hallo Leuts!

Ich habe einen Div mit einem Mülleimer als Hintergrund Bild, alles schön und gut, aber im Chrome zeigt er mir ihn nicht an, also da ist kein Bild. Im Internet Explorer schon. Weiß einer eine Lösung??? o_O

Hier mal der CSS Coder:

.newsdeletebutton {
position: relative;
margin-top:105px;
left:310px;
position:relative;
height:25px;
width:25px;
border:none;
color:rgba(255,255,255,0);
background-image: url(images/mülleimerzu.png);
background-repeat: no-repeat;
background-color:rgba(255,255,255,0);
cursor:pointer;
}

...zur Frage

CSS funktioniert in Notepad++ nicht?

Hab ein HTML Dokument erstellt...hat auch alles funktioniert nun habe ich ein Style.css erstellt und dieses in meiner HTML Seite erkennbar gemacht wenn ich nun aber z.b etwas im CSS Dokument machen wir z.b body {background-color:"red";} und ich es dann speichere funktioniert es einfach nicht? Ich habe im CSS Dokument auch schon die Sprache CSS oben ausgewählt...

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

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

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

Was möchtest Du wissen?

Deine Frage stellen