CSS: Problem mit Bild

Verfasser Nachricht

offliner

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

Diese Nachricht in einer Antwort zitieren

Aaron

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

Dynamic Webmedia

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

offliner

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

N33D-Design

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

Beitrag: #5

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

offliner

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

Baumstrukturmodus | Brettstrukturmodus

« Ein Thema zurück | Ein Thema vor »

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

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