Hilfe beim responsiven Header

Hallo,

ich würde gerne einen Part responsive machen.
Da die Zeilen von mir stammen, sind sie leider noch nicht handytauglich.

Es geht um:

.header_bild {


    height: 399px;
    background: url(xxxx) repeat-x;     
    background-color: #f6f6f6;
     background-position: center center;
  margin-top: 0px;
}

Wie mach ich das am Besten? Gibt es irgendwie nen Generator, den ich noch nicht kenne, wo er fertiges responsive CSS ausspuckt? Heutzutage gibts ja so vieles schon.

Zitat von b3317133

Der Code hat keine eingestellte Breite, also sollte er per se responsive sein. Wo genau liegt das Problem? Ohne den Kontext, wo der Code eingesetzt wird, kann man dazu schwer etwas sagen.

Es geht um http://www.anjaliebt.de
Das ist der Header, den ich gerne responsive machen möchte.
Ich habe ihn aktuell ausgeblendet auf Handys, aber eigentlich wäre es doch schön, wenn er sich anpassen würde, oder?

Bevor ich ihn ausgeblendet habe, wurde er nicht verkleinert angezeigt, was natürlich auf Handys nicht so praktisch ist.

Zitat von uha

Hast du dir mal die verlinkte Seiten angesehen? Wenn ja, hast du nicht alles durchstöbert, wenn nein, traurig.

Dort gibt es sogar ein passenden Beispiel: https://www.w3schools.com/howto/tryit.as…age_responsive2
Verkleinere die rechte Seite dort.

Ja, habe ich, allerdings ist mein Englisch nicht wirklich gut und ich hätte es noch übersetzen müssen.
Ich habe mal dein Beispiel befolgt und es klappt wunderbar, allerdings würde ich gerne per background-repeat: repeat-x; mein Header nun wieder von Anfang an laufen lassen. Aktuell ist es so, wenn der Header endet, dann kommt nichts. Und das würde ich gerne noch ändern.

Mein Code sieht so aus nun:

.responsive {
  max-width: 102%;
  height: auto;
background-repeat: repeat-x;
}

Und mein HTML Code so:

<img src="https://anjaliebt.de/wp-content/uploads/2024/11/headerblog_main1.jpg" alt="header" class="responsive" width="1946" height="399">

Ich habe mal versuch im HTML Code noch background-repeat: repeat-x; einzufügen, klappt aber nicht.

Zitat von b3317133

@Foxi schau Dir mal [FONT=Courier New]background-size: contain;[/FONT] an.

Auch dir ein Danke. Von uha der Beitrag klappte :)
Ich werde mir auch nochmal alles genauer anschauen.