Sponsor-Board.de
Antwort schreiben  Thema schreiben 

CSS: Problem mit Bild

Verfasser Nachricht

Beiträge: 246
Bewertung: 0
Registriert seit: Nov 2010
Status: offline


Beitrag: #1
CSS: Problem mit Bild

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



Angehängte Datei(en) Thumbnail(s)
       
18.08.2016 11:18
 
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren

Beiträge: 3.413
Bewertung: 33
Registriert seit: Oct 2010
Status: offline


Beitrag: #2
RE: CSS: Problem mit Bild

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)


Portfolio: [Link: Registrierung erforderlich]

Projekte
[Link: Registrierung erforderlich]
[Link: Registrierung erforderlich]

18.08.2016 11:22
 
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Gruppen-Admin

Teilnehmer: 11
Gegründet: 17.06.2013
Status: offline


Beitrag: #3
RE: CSS: Problem mit Bild

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.


Mit freundlichen Grüßen



[Link: Registrierung erforderlich] - Follow us on [Link: Registrierung erforderlich] - [Link: Registrierung erforderlich]

18.08.2016 23:13
 
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren

Beiträge: 246
Bewertung: 0
Registriert seit: Nov 2010
Status: offline


Beitrag: #4
RE: CSS: Problem mit Bild

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!

28.09.2016 15:28
 
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren

Beiträge: 99
Bewertung: 4
Registriert seit: Dec 2012
Status: offline


Beitrag: #5
Wink  RE: CSS: Problem mit Bild

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%;}
}


[Link: Registrierung erforderlich]http://upload-pictures.de/bild.php/97172,kontakt00OWQ.png(!https)

28.09.2016 16:40
 
Webseite des Benutzers besuchen Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren

Beiträge: 246
Bewertung: 0
Registriert seit: Nov 2010
Status: offline


Beitrag: #6
RE: CSS: Problem mit Bild

N33D-Design schrieb:
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%;}
}


Danke, werde das mal so versuchen.

28.09.2016 16:59
 
Alle Beiträge dieses Benutzers finden Diese Nachricht in einer Antwort zitieren
Antwort schreiben  Thema schreiben 

Möglicherweise verwandte Themen...
Thema: Verfasser Antworten: Ansichten: Letzter Beitrag
  Shoutcast Server mit Bild starten DJ_Drio 1 1.182 09.12.2014 03:04
Letzter Beitrag: push
  Thumbnail Script // Bild milchig ? Fredix 5 1.255 04.04.2013 22:30
Letzter Beitrag: Fredix
  Bild verkleinern PHP Fredix 6 1.457 12.03.2013 16:51
Letzter Beitrag: Fredix
  Button weglassen und Bild einfügen Fredix 3 1.326 06.03.2013 06:15
Letzter Beitrag: Niklas
  Bild Link mit Text versehen? BHS | Dominik 3 1.475 09.09.2012 19:39
Letzter Beitrag: BHS | Dominik

 Druckversion anzeigen
 Thema einem Freund senden
 Thema abonnieren
 Thema zu den Favoriten hinzufügen

Sponsor-Board.de

Community
Über uns
Partner
Powered by Mybb: Copyright 2002-2024 by MyBB Group - Deutsche-Übersetzung von Mybb.de
 
© 2007-2024 Sponsor-Board.de - Hosted by OVH

Willkommen auf SB!   Sie benötigen ein Sponsoring?   1. Anmelden   2. Sponsoring-Anfrage erstellen   3. Nachrichten von Sponsoren erhalten   Kostenlos!   Jetzt registrieren