kostenloser Webspace werbefrei: lima-city


Ränder eines Bildes mit Farbe überdecken

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    schinkenmedia

    Kostenloser Webspace von schinkenmedia

    schinkenmedia hat kostenlosen Webspace.

    Hey,

    ich schlage mich nun schon seit ein paar Stunden damit rum:

    Ich möchte den Slider ganzseitig haben - so wie er jetzt ist.

    http://schinkenmedia.lima-city.de/

    Links und Rechts, da wo der background ist, soll der Slider aber mit einer Farbe überdeckt werden (grau, 40%). So soll der Slider dann im Background noch zu sehen sein, aber eben verblasster.

    Ich habe es schon mit CSS clipping versucht, komme aber absolut nicht weiter.

    Es würde ja eigentlich schon ausreichen, wenn ich das komplette Bild entsprechend ausgraue und die Mitte (1170px) Transparent mache.

    Hat irgendwer eine Idee wie ich das am besten anstelle?

    Grüße


    Beitrag zuletzt geändert: 17.5.2015 18:32:48 von schinkenmedia
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Hey,

    Ist jetzt vielleicht nicht die 'schönste' Lösung, aber was wenn du einfach einen Div- Container drüberlegst, vlt mit width:98%, und dann je links und rechts einen Rand mit eben Farbe grau, opaciy 0.4 und width 1% machst?
  4. Autor dieses Themas

    schinkenmedia

    Kostenloser Webspace von schinkenmedia

    schinkenmedia hat kostenlosen Webspace.

    atraxoo schrieb:
    Hey,

    Ist jetzt vielleicht nicht die 'schönste' Lösung, aber was wenn du einfach einen Div- Container drüberlegst, vlt mit width:98%, und dann je links und rechts einen Rand mit eben Farbe grau, opaciy 0.4 und width 1% machst?



    Hi,

    leider ist der Abstand Rechts und links nicht immer 1% groß. Die Seite ist Responsive und hat ihre feste Größe bei 1170px, danach kommen dann entsprechend die Seitenabstände so, dass die 1170px immer zentriert in der Mitte sind.


    EDIT: Ich habe es jetzt mit Javascript gelöst:

    <script language="javascript" type="text/javascript">
    		
    		var width = document.body.clientWidth;
    		var height = document.body.clientWidth;
    	
    
           		var grayoutleft = document.getElementById("grayout-left");
           		grayoutleft.style.width = (width - 1170) / 2 + "px";
           		grayoutleft.style.height = height + "px";
    
           		var grayoutright = document.getElementById("grayout-right");
           		grayoutright.style.width = (width - 1170) / 2 + "px";
           		grayoutright.style.height = height + "px";
    
    
    
    
    
            window.onresize = function() {
    
           		var grayoutleft = document.getElementById("grayout-left");
           		grayoutleft.style.width = (width - 1170) / 2 + "px";
    
           		var grayoutright = document.getElementById("grayout-right");
           		grayoutright.style.width = (width - 1170) / 2 + "px";
    		};
    </script>


    Beitrag zuletzt geändert: 17.5.2015 20:21:40 von schinkenmedia
  5. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!