Skalierbarkeit
Hallo zusammen,
ich bastele gerade an einer Webseite und komme an einem Punkt nicht weiter.
Und zwar habe ich eine Art Box erstellt damit ich den Text vom Hintergrund abheben kann.
Dazu habe ich folgenden Code verwenden:
.box1 {
overflow: hidden;
position: relative;
list-style: none;
padding: 38px 50px 31px;
margin: 0 auto;
border-radius: 15px;
opacity: 0.8;
background: url(../img/patternbox1.png);
width: 550px;
}
Leider ist diese Box nicht skalierbar. Alle andere Inhalte sind skalierbar und gut auf einem Handy zu sehen bis auf die oben genannte Box.
Besten Dank!
ich bastele gerade an einer Webseite und komme an einem Punkt nicht weiter.
Und zwar habe ich eine Art Box erstellt damit ich den Text vom Hintergrund abheben kann.
Dazu habe ich folgenden Code verwenden:
.box1 {
overflow: hidden;
position: relative;
list-style: none;
padding: 38px 50px 31px;
margin: 0 auto;
border-radius: 15px;
opacity: 0.8;
background: url(../img/patternbox1.png);
width: 550px;
}
Leider ist diese Box nicht skalierbar. Alle andere Inhalte sind skalierbar und gut auf einem Handy zu sehen bis auf die oben genannte Box.
Besten Dank!
Please also mark the comments that contributed to the solution of the article
Content-Key: 254314
Url: https://administrator.de/contentid/254314
Printed on: April 24, 2024 at 06:04 o'clock
4 Comments
Latest comment
Hallo dafdag,
dafür gibt es in CSS die Grössenangaben vh und vw (view-height / view-width)
Webseite zentrieren
Dein Problem ist aber das du dem Hintergrundbild keine relative Grössenangabe mitgibst damit sich dies mit anpasst.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Beispiel mit relativen Grössenangaben für das Hintergrundbild
oder
http://www.w3schools.com/cssref/playit.asp?filename=playcss_background- ...
Das Padding solltest du dann am besten auch mit relativen Grössenangaben versehen...
Grüße Uwe
dafür gibt es in CSS die Grössenangaben vh und vw (view-height / view-width)
Webseite zentrieren
Dein Problem ist aber das du dem Hintergrundbild keine relative Grössenangabe mitgibst damit sich dies mit anpasst.
http://www.w3schools.com/cssref/css3_pr_background-size.asp
Beispiel mit relativen Grössenangaben für das Hintergrundbild
background-size: 100%;
background-size: contain;
Das Padding solltest du dann am besten auch mit relativen Grössenangaben versehen...
Grüße Uwe