كيف يمكنك تغيير حجم صورة الخلفية مع النافذة

0

أنا أعمل على موقع الويب الخاص بزوجتي. توجد صورة خلفية مباشرة أسفل شريط القوائم في كل صفحة. يرجى الاطلاع على invisionbilling.com/stackoverflow للصورة التي أود استخدامها (إنها تحت صورة الخلفية). أريد تغيير حجم هذه الصورة مع الحفاظ على نفس النسبة وصولاً إلى الاستجابة. لدي شيء يعمل حاليًا ولكني لا أستطيع الحصول على الارتفاع بشكل صحيح. يقطع الصورة على عرض سطح المكتب ولكن عندما أقوم بتقليل النافذة ، يبدأ العرض بشكل صحيح. ومع ذلك ، بمجرد الوصول إلى حجم نافذة معين ، يتوقف عن التعديل ويبدأ فقط بقطع الجانب الأيمن من الصورة. كيف أحصل على الارتفاع لضبطه بشكل صحيح وأيضًا ضبطه بالكامل إلى الاستجابة دون قطع. شكرا لمساعدتك!

CSS

.breadcrumb_area {
background: url("http://invisionbilling.com/wp- 
content/uploads/2018/07/Background-Photo-Updated.jpg");
box-shadow: 0 0 5px rgba(51, 51, 51, 0.1) inset;
border-bottom: 1px solid #e8e8e8;
padding: 60px 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

1 إجابة

0

يجب أن تكون على ما يرام إذا قمت فقط بتبديل منطقة مسار التنقل لديك للحصول على حجم خلفية: احتواء وتعيين خلفية تكرار: عدم تكرار.

.breadcrumb_area {
    background-image: url(http://invisionbilling.com/wp-content/uploads/2018/06/Vision-V5.jpg);
    box-shadow: 0 0 5px rgba(51, 51, 51, 0.1) inset;
    border-bottom: 1px solid #e8e8e8;
    padding: 60px 0;
    width: 100%;
    height: 295px;
    background-size: contain;
    background-repeat: no-repeat;
}
:مؤلف

أسئلة ذات صلة

فوق
قائمة طعام