CSS-Körper fixiert hintergrund

Habe ich diese CSS:

body
{
    background-position: center top;
    background-color: rgb(237, 237, 237);
    font-size: .85em;
    font-family: "Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
    margin: 0px auto;
    padding: 0;
    color: #696969;
    width: 1000px;
    height: 1200px;
    background-image: url('Background.png');
    background-repeat: no-repeat;
    background-attachment: inherit;    
    top: 0px;
}

Wenn ich Fenster maximieren es ist alles ok, aber wenn ich das Fenster kleiner, der hintergrund bewegt sich das Bild.

Dies ist, wie der Blick in maximizedbrowser Fenster

Und dies ist nach änderung der Fenstergröße

InformationsquelleAutor Std_Net | 2012-06-25
  1. 0

    Meisten Antworten, die Sie bekommen von Menschen erfordert IE9+ (da es CSS3). Allerdings, wenn Sie erwarten, dass Benutzer mit älteren Browsern, wie gut (ich bin praktisch und sicher hier), ich denke, die Art und Weise, die Sie brauchen, dies zu tun ist durch die Verwendung von jQuery/JavaScript. Ich habe etwas ähnliches in der Vergangenheit in CSS3, aber ich erkannte später, dass die meisten Firmen/Unternehmen setzen immer noch IE8 und der beste Weg dies zu tun ist mithilfe von JavaScript.

    Hier sind ein paar Beispiele:

    1. http://buildinternet.com/project/supersized/slideshow/3.2/demo.html
      (dies ist ein sehr gutes Beispiel)
    2. http://designshack.net/?p=13616
    3. http://css-tricks.com/examples/FullPageBackgroundImage/jquery.php
    InformationsquelleAutor Geocrafter
  2. 0

    Versuchen Sie Dies:

    -webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position:fixed;
    • Problem dabei ist, dass die Einstellung behoben, nimmt das DOM-element aus der normalen position und damit 'behandeln', passt sich der Körper dann eher das element. Kann nicht scheinen zu finden, a fix noch.
    InformationsquelleAutor SVS
  3. 0

    Nun zunächst einmal, versuchen Sie, Gruppe die CSS-Eigenschaften zusammen, wo verfügbar, als solche:

    body {
width: 1000px;
height: 1200px;
background: #EDEDED url('Background.png') center top inherit no-repeat;
top: 0;
margin: 0 auto;
padding: 0;
font: .85em "Trebuchet MS" , Verdana, Helvetica, Sans-Serif;
color: #696969;
}

    Könnte auch ein jsFiddle für das Problem, damit wir sehen können, die Gesamtheit der code, oder einen link zu der Seite?

    http://jsfiddle.net/

    Dank

    InformationsquelleAutor Aaron Brewer
Schreibe einen Kommentar