Seltsames CSS-Problem...

[desputin]

Hallo Ihr,
ich habe ein seltsames CSS-Problem. Und zwar zeigt mein Browser an, daß eine Grafik nicht richtig geladen werden kann, obwohl sie sichtbar ist. Das CMS ist Wordpress und der Code ist dieser hier:

Code: Alles auswählen

	echo '<div id="slider"><div id="slider-core">',
			     '<div class="rslides-container"><div class="rslides-inner"><ul class="slides">';
				if ( empty( $slider_toggle ) ) {		 
					echo '<li><img src="' . esc_url( get_template_directory_uri() ) . '/images/slideshow/slide_demo1.jpg no-repeat center; background-size: cover;" style="background: url(' . esc_url( get_template_directory_uri() ) . '/images/slideshow/slide_demo1.jpg) no-repeat center; background-size: cover;" /></li>';
					echo '<li><img src="' . esc_url( get_template_directory_uri() ) . '/images/slideshow/slide_demo2.jpg no-repeat center; background-size: cover;" style="background: url(' . esc_url( get_template_directory_uri() ) . '/images/slideshow/slide_demo2.jpg) no-repeat center; background-size: cover;" /></li>';
					echo '<li><img src="' . esc_url( get_template_directory_uri() ) . '/images/slideshow/slide_demo3.jpg no-repeat center; background-size: cover;" style="background: url(' . esc_url( get_template_directory_uri() ) . '/images/slideshow/slide_demo3.jpg) no-repeat center; background-size: cover;"  /></li>';
					echo '<li><img src="' . esc_url( get_template_directory_uri() ) . '/images/slideshow/slide_demo4.jpg no-repeat center; background-size: cover;" style="background: url(' . esc_url( get_template_directory_uri() ) . '/images/slideshow/slide_demo4.jpg) no-repeat center; background-size: cover;"  /></li>';
					echo '<li><img src="' . esc_url( get_template_directory_uri() ) . '/images/slideshow/slide_demo5.jpg no-repeat center; background-size: cover;" style="background: url(' . esc_url( get_template_directory_uri() ) . '/images/slideshow/slide_demo5.jpg) no-repeat center; background-size: cover;" /></li>';

Die Seite ist diese hier. Es handelt sich um die Grafiken des Sliders:
http://politikvonunten.org/BDP/
Könnt Ihr mir sagen, was am Code falsch ist?

Viele Grüße desputin

[TRex]

Nein, weil ich die Bilder sehe. Welchen Browser verwendest du, dass die Bilder nicht dargestellt werden?

[desputin]

Also in Firefox sieht die Grafik an der Seite so aus:


und in Chromium so:


Siehe das kleine Symbol oben links auf der Grafik...

[Emess]

Code: Alles auswählen

http://politikvonunten.org/BDP/
Beschädigte Bilder

    http://politikvonunten.org/BDP/wp-content/themes/sento/images/slideshow/slide_demo1.jpg%20no-repeat%20center;%20background-size:%20cover;?web-developer-reload=1496688099912
    http://politikvonunten.org/BDP/wp-content/themes/sento/images/slideshow/slide_demo4.jpg%20no-repeat%20center;%20background-size:%20cover;?web-developer-reload=1496688099979
    http://politikvonunten.org/BDP/wp-content/themes/sento/images/slideshow/slide_demo5.jpg%20no-repeat%20center;%20background-size:%20cover;?web-developer-reload=1496688100001
    http://politikvonunten.org/BDP/wp-content/themes/sento/images/slideshow/slide_demo3.jpg%20no-repeat%20center;%20background-size:%20cover;?web-developer-reload=1496688099955
    http://politikvonunten.org/BDP/wp-content/themes/sento/images/slideshow/slide_demo2.jpg%20no-repeat%20center;%20background-size:%20cover;?web-developer-reload=1496688099934

ob es damit zusammenhängt? Und was soll dieses kleine Favicon in den Bildern?
Und wenn ich den Link zum Bild aufrufe wird weder Bild noch Seite gefunden. Meiner Meinung stimmt deine Verlinkung nicht richtig oder das was WP daraus macht.

[desputin]

Hm, also das hier wird doch gefunden:

Code: Alles auswählen

http://politikvonunten.org/BDP/wp-content/themes/sento/images/slideshow/slide_demo2.jpg

[Emess]

Das spuckt die Google Chrome Console aus

[TBT]

<img src="' . esc_url( get_template_directory_uri() ) . '/images/slideshow/slide_demo1.jpg no-repeat center; background-size: cover;" style="background: url(' . esc_url( get_template_directory_uri() ) . '/images/slideshow/slide_demo1.jpg) no-repeat center; background-size: cover;" />

du wolltest bestimmt das hier schreiben (ohne style Angaben im src Attribut)

<img src="' . esc_url( get_template_directory_uri() ) . '/images/slideshow/slide_demo1.jpg" style="background: url(' . esc_url( get_template_directory_uri() ) . '/images/slideshow/slide_demo1.jpg) no-repeat center; background-size: cover;" />

[desputin]

Hallo TBT,
das Problem: Wenn ich die von Dir rot markierten Teile wegnehme, verzerren die Grafiken. Das sieht dann so aus:



vs. vorher MIT den rot markierten Elementen no-repeat center..... sieht es besser, also unverzerrt aus:

[TBT]

Nur im src-Attribut rausnehmen, dort sind sie falsche.
Im style-Attribut müssen sie drin bleiben.
Wäre wahrscheinlich auch besser, die Style Angaben über eine externe CSS Datei zu machen.

[desputin]

Hm, das hab ich gemacht, aber enn ich das jetzt als Code nehme, dann verzerren die Grafiken nach wie vor:

Code: Alles auswählen

echo '<li><img src="' . esc_url( get_template_directory_uri() ) . '/images/slideshow/slide_demo1.jpg" style="background: url(' . esc_url( get_template_directory_uri() ) . '/images/slideshow/slide_demo1.jpg) no-repeat center; background-size: cover;" /></li>';