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:
<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;
}
So sieht es gerade aus:

Vielen Dank schonmal
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:
<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;
}
So sieht es gerade aus:

Vielen Dank schonmal