Hilfe beim Hintergrundbild

Diskutiere Hilfe beim Hintergrundbild im HTML Forum im Bereich Programmierung; Hallo zusammen! Ich bin noch ein Lehrling und habe noch viel vor mir. Ich hoffe ihr könnt mir bei meinem Problem helfen, was ich seit über ner...
  • Hilfe beim Hintergrundbild Beitrag #1
M
montababa
New member
Beiträge
3
Punkte Reaktionen
0
Hallo zusammen!

Ich bin noch ein Lehrling und habe noch viel vor mir. Ich hoffe ihr könnt mir bei meinem Problem helfen, was ich seit über ner Woche stört...

habe ein Hintergrundbild, was aber nur im oberen Rand der Seite sein soll, worauf Text, Logo und sonstiges kommen soll. Um das so hinzubekommen habe ich es mit einem div-Container probiert.
Da das Bild nie vom linken bis zum rechten Rand durchgeht (rechts bleibt immer ein Rand über), habe ich de ganze Zeit alles mögliche versuch. Dadurch ist sicher viel Mist im Code dazugekommen.
Kann mir da jemand bitte helfen, also dass das Hintergrundbild vom linken bis zum rechten Bildschirmrand geht aber nur oben auf der Seite ...

Hier mein Code:
HTML:
<div class="container" style="position: relative">
        <div class="row">
            <img src="logo.jpg" style="height: 100px; width: 200px">
        </div>
        <div class="row" style="padding-left: 75px; padding-bottom: 40px">
            <h1 style="font-weight: bold; color: white;font-size: 70px">ZEIT ZU WACHSEN?</h1>
            <h2 style="color: white">Erfolgreich expandieren mit internationalem SEO</h2>
        </div>
        <div class="row">
            <ul class="list-group list-group-flush">
                <li class="list-group-item" style="width: auto; text-align: right; padding-right: 200px; background-size: 100% 100%">TOP-RANKINGS</li>
                <li class="list-group-item" style="width: auto; text-align: right; padding-right: 100px; background-size: 100% 100%">INTERNATIONALES SETUP</li>
                <li class="list-group-item" style="width: auto; text-align: right; padding-right: 90px; background-size: 100% 100%">ONPAGE OPTIMIERUNG</li>
                <li class="list-group-item" style="width: auto; text-align: right; padding-right: 60px; background-size: 100% 100%">OFFPAGE OPTIMIERUNG</li>
                <li class="list-group-item" style="width: auto; text-align: right; padding-right: 10px;; background-size: 100% 100%; margin-bottom: 50px">PROFESSIONELLES SEO-CONTROLLING</li>
            </ul>
        </div>
    </div>

CSS:
.container{
            background-image: url("teddi.jpg");
            background-repeat: no-repeat;
            background-position: top;
            background-size: cover;
            background-size: auto;
            margin-right: 0;
            margin-left: 0;
            padding-right: 0;
            width: 100%;
            height: auto;
        }

        html, body {
            margin: 0;
            padding: 0;
        }

Bilder folgen jetzt..

Vielen Dank schonmal

Screenshot 2024-06-10 145527.png
 
  • Hilfe beim Hintergrundbild Beitrag #2
E
Eselfant
Member
Beiträge
6
Punkte Reaktionen
0
Moin (Lehrling) Werner,

Ich habe verstanden das Du ein Bild einfügen möchtest und dann Text auf dem Bild platzieren. Das Bild und mehrere Texte sollen also übereinander sein. Schau dir dazu vielleich mal "z-index" an: https www w3schools com/css/css_z-index.asp

Viel Glück. Viel mehr helfen kann ich da jetzt auch nicht, denn ich lerne es selbst gerade erst.

Gruß Eselfant
 
  • Hilfe beim Hintergrundbild Beitrag #3
N
Noremg
Member
Beiträge
12
Punkte Reaktionen
0
Verwende KI als deinen Helfer. Ich nutze sie auch für solche Anfragen.
 
Thema:

Hilfe beim Hintergrundbild

Oben Unten