+- Sponsor-Board.de (https://www.sponsor-board.de)
+-- Forum: Community (/forumdisplay.php?fid=56)
+--- Forum: Hilfe (/forumdisplay.php?fid=102)
+---- Forum: Scripting (/forumdisplay.php?fid=108)
+---- Thema: CSS: Problem mit Bild (/showthread.php?tid=61141)
CSS: Problem mit Bild - offliner - 18.08.2016 11:18
Hallo,
ich habe da ein kleines Problem mit einem Hintergrundbild in einem Header meiner Wordpress Seite.
Mit folgender Zeile habe ich das Bild ins Stylesheeteingefügt:
Code:
.site-header { background: url(http://beispiellink.de/wp-content/uploads/2016/04/g4481.png) no-repeat 200% 30%, url(http://beispiellink.de/wp-content/uploads/2016/04/flowRoot3336.png) no-repeat 1% 82%; }
Mein Problem ist nun:
Also es geht (siehe Screenshots im Anhang) um das erste Bild (hier: g4481.png) mit der Reifenspur rechts. Bei Standard-Auflösung und höher (z.B. 1980x1080) ist das ganze in Ordnung. Nur mein Problem ist, dass sich das Bild bei kleineren Displays bzw. geringerer Auflösung (z.B. am Laptop) im Header nach links hin verschiebt, wie auf dem 2. Screenshot zu sehen ist.
Was kann man da verändern, um das Bild an der Stelle zu fixieren?
MfG
offliner
RE: CSS: Problem mit Bild - Aaron - 18.08.2016 11:22
Wenn ich das richtig verstanden habe:
Code:
.site-header {
background-image: url(http://beispiellink.de/wp-content/uploads/2016/04/g4481.png);
background-repeat: no-repeat;
background-size: contain;
background-position: right bottom;
}
(hier extra aufgeteilt in die verschiedenen Attribute, kann auch zsm. gefasst werden)
RE: CSS: Problem mit Bild - Tobias - 18.08.2016 23:13
Es könnte auch sein das ein Media Query das bei geringerer Auflösung verändert, bzw. die Angaben überschreibt. Wenn das so wie Aaron geschrieben hat nicht funktioniert könntest du mal deine Console öffnen vom Browser und schauen ob die klasse überschrieben wird. Am besten mal die Url posten. Oder mit dem !important Attribut für faule geht auch einiges.
RE: CSS: Problem mit Bild - offliner - 28.09.2016 15:28
Hallo,
ich habe das Problem bisher leider so noch nicht lösen können. Hat jemand ggf. Zeit und/oder Lust sich das mal anzuschauen?
Vielen Dank!
RE: CSS: Problem mit Bild - N33D-Design - 28.09.2016 16:40
So könntest du das machen zum Beispiel.
Nicht perfekt aber so als Idee für dich.
Code:
.site-header{
transition: background 0.1s;
}
@media(min-width:34em){
.site-header {background: url(http://car-evolution.de/wp-content/uploads/2016/04/flowRoot3336.png) no-repeat 1% 82%;}
}
@media(min-width:48em){
.site-header {background: url(http://car-evolution.de/wp-content/uploads/2016/08/g4481_2.png) no-repeat 20vw -10em, url(http://car-evolution.de/wp-content/uploads/2016/04/flowRoot3336.png) no-repeat 1% 82%;}
}
@media(min-width:62em){
.site-header {background: url(http://car-evolution.de/wp-content/uploads/2016/08/g4481_2.png) no-repeat 30vw -10em, url(http://car-evolution.de/wp-content/uploads/2016/04/flowRoot3336.png) no-repeat 1% 82%;}
}
@media(min-width:75em){
.site-header {background: url(http://car-evolution.de/wp-content/uploads/2016/08/g4481_2.png) no-repeat 40vw -10em, url(http://car-evolution.de/wp-content/uploads/2016/04/flowRoot3336.png) no-repeat 1% 82%;}
}
RE: CSS: Problem mit Bild - offliner - 28.09.2016 16:59
N33D-Design schrieb:
So könntest du das machen zum Beispiel.
Nicht perfekt aber so als Idee für dich.
Nicht perfekt aber so als Idee für dich.
Code:
.site-header{
transition: background 0.1s;
}
@media(min-width:34em){
.site-header {background: url(http://car-evolution.de/wp-content/uploads/2016/04/flowRoot3336.png) no-repeat 1% 82%;}
}
@media(min-width:48em){
.site-header {background: url(http://car-evolution.de/wp-content/uploads/2016/08/g4481_2.png) no-repeat 20vw -10em, url(http://car-evolution.de/wp-content/uploads/2016/04/flowRoot3336.png) no-repeat 1% 82%;}
}
@media(min-width:62em){
.site-header {background: url(http://car-evolution.de/wp-content/uploads/2016/08/g4481_2.png) no-repeat 30vw -10em, url(http://car-evolution.de/wp-content/uploads/2016/04/flowRoot3336.png) no-repeat 1% 82%;}
}
@media(min-width:75em){
.site-header {background: url(http://car-evolution.de/wp-content/uploads/2016/08/g4481_2.png) no-repeat 40vw -10em, url(http://car-evolution.de/wp-content/uploads/2016/04/flowRoot3336.png) no-repeat 1% 82%;}
}
Danke, werde das mal so versuchen.