Bild in Header als Hintergrund einfügen

[hersfelder-fass]

Hallo,

wie kann ich eine Foto als Hintergrundbild in den Header einfügen?
Folgendes ist mir bekannt:
Ich mache vom Nova Template eine Child Version. Habe ich gemacht.
Ich muss mich wenigstens ein bisschen mit CSS auskennen. Tue ich

Bin sehr dankbar für Hilfe.

 

[ARA-Marketing]

Trage in die custom.css ein:

header {background-image: linear-gradient( cornflowerblue 0%, wheat 50%);}

Das ist jetzt ein Farbverlauf, kann dann über den entsprechenden Link mit Bild ausgetauscht werden.

Viele Grüße
Eas

 

[keraworld]

@ARA-Marketing
wo muss ich das Bild hinterlegen und welchen Link meinst du.
Ich habe mal einfach die komplette Zeile kopiert und in custom.css eingefügt sieht schön aus würde so sogar passen. Darf ich abe sicher nicht benutzen, oder?
Währe es auch updatesicher?

 

[BendiD]

If you're already using a child theme, you're in a good spot. Usually this is just a CSS job: target the header container and apply a background-image, plus background-size: cover; and background-position: center; so it scales nicely.

Something like identifying the header class in Inspect Element first is the real key. Without the right selector, even perfect CSS does nothing.

Also worth checking mobile behavior, overlay contrast, and load speed if the image is large. A nice header that slows down the site and can hurt UX. Same thing SalesAR often mentions in lead gen for web dev and SaaS projects: design should support performance, not fight it.

Once you know the header class name, the rest is usually straightforward.