 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
soy
Threadersteller
Dabei seit: 04.11.2011
Ort: Münsterland
Alter: -
Geschlecht: 
|
Verfasst Fr 27.01.2012 16:23
Titel 2x Backgrounds mit 100%, auch bei resize |
  |
|
Hallo,
ich habe eine Seite, in der ein Hintergrundbild auf 100% in alle richtungen Skaliert werden soll. Das funktioniert wunderbar. Durch CSS3 ist das Bild immer proportional und zentriert.
Weil aber so verpixelte Bilder unschön aussehen, und ich das entschärfen möchte, lege ich ein Muster (Scanlines) drüber. Die müssen dementsprechend auch 100% in Höhe und Breite haben:
| Code: |
<html>
<head>
<script src="<?php get_theme_url(); ?>/jquery1.7.1.js"></script>
<script type="text/javascript">
var images = ['bg1.jpg', 'bg2.jpg', 'bg3.jpg', 'bg4.jpg', 'bg5.jpg'];
$('html').css({'background-image': 'url(<?php get_theme_url(); ?>/images/backgrounds/' + images[Math.floor(Math.random() * images.length)] + ')'});
</script>
<style type="text/css">
html {
background: url("images/backgrounds/bg1.jpg") center center fixed;
margin: 0; padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
/* IE */
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img.jpg', sizingMethod='scale')";
}
body {background: url("images/layer.png") fixed; margin: 0; padding: 0;}
</style>
</head>
<body>
Inhalt
</body>
</html> |
(Das Hintergrundbild ändert sich zufällig, daher kommt das Javascript. Das ganze bastel ich als CMS Template für Get-Simple).
Das blöde ist, dass die Scanlines nicht mitscrollen sollen (also :fixed), aber trotzdem, sobald ich das Fenster vergrößer/verkleiner, Bildschirmfüllend sein sollen, und nicht nur den Body umgeben!
Projektseite:
http://app.heider-held-design.de/hannes/
Hat da jemand eine Idee?
Grüße,
Soy
Zuletzt bearbeitet von soy am Fr 27.01.2012 16:25, insgesamt 1-mal bearbeitet
|
|
| |
   |
 |
Zeithase
Dabei seit: 09.05.2005
Ort: Erfurt
Alter: 39
Geschlecht:
|
Verfasst Fr 27.01.2012 16:29
Titel
|
|
|
Hindert Dich etwas daran, ein einzelnes Hintergrundbild mit ebenjenen Scanlines zu nehmen? Das wäre vermutlich die einfachste Lösung. 
|
|
| |
|
|
|
Anzeige
|
|
|
soy
Threadersteller
Dabei seit: 04.11.2011
Ort: Münsterland
Alter: -
Geschlecht:
|
Verfasst Fr 27.01.2012 16:30
Titel
|
|
|
|
Ja. Die Bilder sollen wechseln, und die Bilder werden in der Größe ja ständig verändert. Die Scanlines würden dann mitskaliert werden, allerdings sind die (1px-Striche) dann ziemlich schnell große labrige Störfaktoren (; Sonst müsste ich das Hintergrundbild als 4000x2000 Pixel anfertigen lassen, was die Ladezeiten killt.
|
|
| |
|
|
soy
Threadersteller
Dabei seit: 04.11.2011
Ort: Münsterland
Alter: -
Geschlecht:
|
Verfasst Fr 27.01.2012 16:53
Titel
|
|
|
So ein Update: Der Hintergrund passt sich immer der aktuellen Browsergröße an. Trotzdem kann ich leider aus dem Hintergrund rausscrollen :/
| Code: |
body {background: url("images/layer.png") fixed; margin: 0; padding: 0; height: 100%;}
#wrapper {
margin: auto; /* Div soll zentriert werden */
min-height: 100%; /* Mindesthöhe für moderne Browser */
height:auto !important; /* Important Regel für moderne Browser */
height:100%; /* Mindesthöhe für den IE */
overflow: hidden !important; /* FF Scroll-leiste */
} |
Und dann um meinen Inhalt einfach einen Div mit ID #wrapper gelegt. Also so:
| Code: |
<body>
<div id="wrapper">
<!-- Inhalt -->
</div>
</body> |
Wie kann ich das beheben?
Zuletzt bearbeitet von soy am Fr 27.01.2012 16:55, insgesamt 1-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
CSS: Positionierung von 2 backgrounds
Jquery backgrounds faden?
Background - Stylishe Backgrounds...
Wo finde ich solche Backgrounds?
phpbb Image resize | WIE?
Backgrounds ? wo finde ich sowas ?
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
