Hintergrundbild an Blockgröße anpassen und mitscrollen

Schönen guten Morgen,
bin auf der suche nach dem passendem Therm der mir das Hintergrundbild mitscrollen lässt aber auch auf die Blockgröße anpasst.
Aktuell habe ich diese zusätzliche CSS hinterlegt für diese Seite:

.main-content {
background-color: rgba(255,255,255,0.6);
}
body.page-id-1338 {
background-image: url("https://manipura-elements.com/wp-content/upl…407252_1920.jpg");
background-repeat: no-repeat; /* sorgt dafür, dass das Bild nicht wiederholt wird */
background-attachment: [COLOR=#ff4d4d]fixed[/COLOR]; /* sorgt dafür, dass das Bild nicht mitscrollt */
}

dieses fixed passt mir zwar das Bild auf die Seite an so weit so gut aber der Text (Block) scrollt über das Bild
auch wenn ich den Therm änder scrollt das Bild zwar mit aber wird nicht angepasst auf die Größe.

Kann mir hier kurz wer weiterhelfen das beide vorgaben funktionieren? Bild angepasst auf Größe sowie mitscrollen.

Link zur Seite: https://manipura-elements.com/testseite/

Vielen Dank im voraus schon mal.

Hallo OWS, perfekt vielen Dank. Hat einiges so geregelt wie gewünscht ;) Kannst du mir evtl. noch weiterhelfen beim Abstand einfügen zwischen Header und main-content? Hätte gerne einen Abstand zwischen der halb transparenten weißem main content box und dem Bild im Header bzw. dem Header. genauso sollte am Ende auch noch einmal ein Abstand zwischen weißem Block und Fußzeile sein. ich finde leider nicht die passende Einstellung. Sei es in den Einstellungen im Theme CSS oder die nötigen Zeilen die in die personalisierten CSS zu schreiben sind.:(

Hy b3317133,
Klappt perfekt( aktuell nur am Händy schnell getestet, zuhause dan definitiv am PC)..vielen Dank