كيفية إصلاح صورة الخلفية داخل Div

Question

لقد اكتشفت مشكلة غريبة إلى حد ما ، أعتقد أنني أعرف كيف أشرح ؛ أنا فقط لا أعرف كيفية إصلاحه!

لديّ صفحة تحتوي على حاوية Div#(Div مع 100 ٪ دقيقة (ارتفاع IE)) التي تحتوي على رأس ، و "محتوى الصفحة" وتذييل. من المفترض أن تكون صورة الخلفية لحاوية Div#ثابتة (وليس موضعًا ثابتًا ولكن background-attachment: fixed مما يجعل الصورة متابعة عند التمرير).

المشكلة هي أنه عند إضافة المرفق الثابت إلى مجموعة الخلفية في CSS ، يتم الآن وضع صورة الخلفية خارج Div.

CSS كما يلي: (بدون background-attachment: fixed;)

div#container {
    position:relative;
    width:900px;
    margin:0 auto;
    background-color: #ccffff;
    background-image: url("pics/sign.jpg");
    background-repeat: no-repeat;
    background-position: right top;

    height:auto !important;
    height:100%;

    min-height:100%;
}

margin:0 auto; هو لتوسيط div و !important الشيء في الأول height: هو لجعل IE تجاهل هذا العدد الارتفاع. هذا مطلوب إذا min-height: 100% يجب أن تعمل.

عندما أضيف هذا ...

div#container {
    position:relative;
    width:900px;
    margin:0 auto;
    background-color: #ccffff;
    background-image: url("pics/sign.jpg");
    background-attachment: fixed; //This is what is added to the code-sample
    background-repeat: no-repeat;
    background-position: right top;

    height:auto !important;
    height:100%;

    min-height:100%;
}

... صورة الخلفية تتحرك خارج Div. اسمحوا لي أن أشرح هذا: الجزء الوحيد المرئي من صورة الخلفية هو ما لا يزال داخل <div id="container"> لكن جزءًا من الصورة قد تحرك خارج Div وهو الآن غير مرئي.

لتلخيص...

عندما يتم إصلاح صورة الخلفية ، تكون صورة الخلفية مخفية جزئيًا ، وتتحرك خارج Div. الصورة تقع إلى أعلى يمين نافذة المتصفح, ، ليس إلى أعلى يمين ديف.

اتمنى منكم ياشباب المساعدة!

Answer 1

هذا السلوك صحيح في الواقع. أي خلفية attachment: fixed سيكون بالنسبة إلى منفذ العرض ، وليس العنصر الذي يتم تطبيقه عليه. هذا هو في الواقع أساس إريك ماير دوامة معقدة العرض التوضيحي.

Answer 2

على الرغم من أنه لا يمكن أن يكون لديك موضع خلفية ثابت داخل DIV ، إلا أن الحل الأسهل هو إنشاء Div بحجم صورتك. اجعل الصورة الخلفية ، وقم بتعيينها على position:absolute في الركن الأيمن العلوي من Div تريد وضعه في استخدامه right:0px;top:0px. تأكد من أن Div الوالد position:relative أو لن يتم وضعه على الإطلاق داخل هذا div.

Answer 3

يجب أن تحاول إضافة background-origin الممتلكات ، ربما border-box القيمة ستحل مشكلتك. كما قد ترغب في تحديد background-size, ، تذكر cover و contain مدعومون ومفيدون للغاية.