[xVire]

Guten Tag!

Ich baue mit meinem Team seit einiger Zeit an der neuen Version unseres Onlineshops. Soweit sind wir sehr zufrieden mit dem Ergebnis, dennoch basiert unser HTML/CSS wissen nur auf minimalsten Anpassungen von fertigen Modulen.

Nun macht uns ein Modul welches das hinzufügen von verschiedenen Hintergründen basierend auf bestimmten parametern ermöglichst die Hölle heiß.

Wie in der Branche übrig möchten wir "Interessante" Produkte mit einem unaufdringlichen "Schau mal da!" Hintergrund bewerben. Die Haupt-Auflösung unserer Zielgruppe ist definitv 1920x1080 also sind unsere Hintergründe auch dafür designt.

Da es aber auch andere Devices oder Laptops mit auflösungen wie 1366 x 768 gibt, sehen die Hintergründe dort dann sehr unbrauchbar aus. Nun haben wir zwei optionen. Die eine wäre den Container zu verkleinern wodurch auch die Infos kleiner werden. Dies möchten wir aber defintiv nicht!

Die option die uns besser gefällt, wäre mit @Media zu arbeiten. Das oben erwähnte Modul bietet die Möglichkeit den Hintergrund via CSS 3 oder .js einzubinden.

Wir würden nun gern mit @Media 2 hintergründe verwenden. Version 2 (schlicht in der Hauptfarbe der website) für alle Devices mit einer Auflösung niedriger als 1920 und Version 1 bei allen Devices ab 1920.

Den Grundcode haben wir uns so vorgestellt:

@media (min-width: 1900px)and(max-width: 2100px) {     #vegas-background{     display:none;   }      }

Unser Problem ist nun, dass wir nicht wissen wie unser Background im CSS deklariert ist, wir haben den Quellcode zwar schon mehrfach mit Chrome angesehen aber konnten dort nichts finden.

Nun würden uns zwei Hilfestellungen sehr voran bringen!

Zum einen jene, welche uns sagt wie unser Hintergrund im CSS heißt (Link gibt es dann per PN, da wir die Website gern noch im Dunkeln lassen würden, bis sie fertig ist)

Und zum anderen natürlich ob unser Code funktionieren könnte. Die Idee dahinter ist, dass das Modul welches die Hintergründe verarbeitet sozusagen erst anspricht bei der obigen Auflösung und davor der normale Template Hintergrund verwendet wird, welchen wir dann einfärben.

Edit:

hier ein Auszug aus dem Quellcode, wir vermuten, die entsprechende Codestelle gefunden zu haben.

<style type="text/css">.abg_click_zone { z-index: 1; }
		header, .header-container, .columns-container, .footer-container { background: none!important; }
	body {
		background: url("/modules/pm_advancedbackgroundchanger/uploads/slides/53a65e22ce6a9.jpg") center center no-repeat fixed, transparent;
	}</style><!--[if lt IE 10]> <script type="text/javascript" src="/modules/pm_advancedbackgroundchanger/js/PIE.js"></script> <![endif]--><!--[if IE 8]><style type="text/css">body {
  -pie-background: 
				
			
			    url("/modules/pm_advancedbackgroundchanger/uploads/slides/53a65e22ce6a9.jpg")
									center center
				
			    			    	no-repeat
			    
				 fixed 
							
				
			 transparent  ;

 	 /* behavior: url(/modules/pm_advancedbackgroundchanger/css/PIE.php); */
 }</style><![endif]-->