Wie passe ich ein Bild auf meiner Website so an, dass es perfekt in den Header passt?

Hallo, ich habe vor 3 Tagen angefangen mich mehr mit programmieren zu beschäftigen, habe also noch kaum Erfahrung. Ich habe nun angefangen eine Website zu bauen, habe mit CSS angefangen, aber weiß nicht wie ich hinter meine Überschrift ein Bild bekomme. Wenn ich auf Google suche und die lösungen dort probiere, dann wird das Bild immer zum Hintergrund der gesamten Website, nur nur vom Head-Bereich. Weiß da jemand eine lösung?

(Ich arbeite nur mit VS Code)

Danke im voraus

Answer 1

[iQa1x]

Wenn du deine Überschrift in ein <h1> im HTML schreibst, kannst du per CSS da ein Hintergrund-Bild für definieren:

h1 {
  background-image: url(bild.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: right top;
}

Evtl. noch mit padding den Innenabstand setzen, damit das Bild nicht mit dem Text aufhört.

Du kannst natürlich auch noch ein <div id="bk"> um die Überschrift basteln und dann den Hintergrund des <div> über #bk { .... } setzen.

Woher ich das weiß: Berufserfahrung – Softwareentwickler & Admin

Answer 2

[Cloudixx97]

Mit einem Container und dann verschieben so wie es dir gefällt

Woher ich das weiß: Studium / Ausbildung – Master in der FU Berlin als Wirtschaftsinformatiker