عندي مشكل في الصفحة الرئسية
إن كنت تريد أن تكون الصورة في الخلفية تغطي الفراغ، ويظهر الفوتر في أسفل الصفحة .
قم بإضافة هذا سطر لـ class الخاص بـ elem الخاصة بالخلفية :
height: calc(100vh - XXpx);
قم بإستبدال XX بقيمة الإرتفاع لكل من الـ Header والـ Footer - نتيجة جمعهما - ، وبذلك يظهر حجم الحاوي الخاص بصورة، بحجم الفراغ بين Header / Footer .
اضف هذا الى CSS الخاص بــ Header
height: 100vh;
طبعا بعد اضافة رابط الصورة وليكن على هذا الشكل
background-image: url(img/hero.jpg);
يمكنك اضافة هذه الخصائص ايضا
background-size: cover;
background-position: center;
function adjust_height(){
var min_h = ($(window).height() - 130);
if(min_h < 100){min_h = 100;}
$("#main-container").css("min-height",min_h+"px");
}
$(document).ready(function(){
adjust_height();
});
استبدل ال main-container .. ب id ال div الذى تريد تكبيره .
تحكم فى قيمة ال 130 بما يناسب ارتفاع الهيدر .. يعنى جرب تقلل و تزود لحد ما تظبط معاك
هذا كود javascript ... حطه فى أى ملف js يتم إستدعاؤه أو فى الصفحة نفسها قبل إنتهاء وسم body
التعليقات