resize background image

هناك ميزة تدعى @media في لغة css يمكنك استخدامها لتغيير حجم الخلفية في مختلف الشاشات عبر كتابة هذا الكود في اخر ملف ال css 

على سبيل المثال اريد تغيير حجم الخلفية عند المقاس 768px كحد اقصى ف اكتب الكود التالي 

@media (max-width: 768px) {
    body {
        //هنا تضع الاحجام والمميزات التي تريدها 
    }
}

الخاصية @media هي التي تسمح لنا بالتحكم بمقاس الشاشة 

max-width: 768px : حددت له انه من اصغر حجم للشاشات وحتى المقاس 768px  

وبين الاقواس الهلالية تكتب الكود الذي تريده 

وهناك طريقة لتعرف مقاس الشاشة الذي تريد تغير الخصائص عنده وذلك من خلال تثبيت اضافة width and height display  

وبالتوفيق لك 

بتاريخ 19 دقائق مضت قال Najah Alsaker:

هناك ميزة تدعى @media في لغة css يمكنك استخدامها لتغيير حجم الخلفية في مختلف الشاشات عبر كتابة هذا الكود في اخر ملف ال css 

على سبيل المثال اريد تغيير حجم الخلفية عند المقاس 768px كحد اقصى ف اكتب الكود التالي 

@media (max-width: 768px) {
    body {
        //هنا تضع الاحجام والمميزات التي تريدها 
    }
}

الخاصية @media هي التي تسمح لنا بالتحكم بمقاس الشاشة 

max-width: 768px : حددت له انه من اصغر حجم للشاشات وحتى المقاس 768px  

وبين الاقواس الهلالية تكتب الكود الذي تريده 

وهناك طريقة لتعرف مقاس الشاشة الذي تريد تغير الخصائص عنده وذلك من خلال تثبيت اضافة width and height display  

وبالتوفيق لك 

انا ادرك ذلك استاذتي انا اقصد كيفيه عمل resize للصوره جربت عمل تغيير فعلا ولكن ال height لا يتغير

اريد ان اصغر ال height الخاص ب header كي يناسب الشاشات 

DR.Scan (2).zip

مرحبا
تستطيع في احجام شاشة الموبيل  استخدام 
 

background-size: 100% 100%;

مع استخدام هذه الكود وهنا تستخدم صور bac.png وليس bac1.png لانه الصورة مبكسله اصلا
 

@media (max-width: 767.98px) {
header {
    background-image: url(../src/images/bac.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
 
  
}
}

او من الممكن استخدام

 background-size: cover;
 background-clip: border-box;

وسوف سكون شكلها هكذا

مع استخدام هذه الكود

@media (max-width: 767.98px) { 
header {
    background-image: url(../src/images/bac.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-clip: border-box;

  
}
}

اذ لم يظبط مع هذا الحل
فكدا لازن تصغر ال height الخاص ب header علي شاشات الموبيل

بتاريخ 2 دقائق مضت قال Mahmoud Hassan19:

مرحبا
تستطيع في احجام شاشة الموبيل  استخدام 
 

background-size: 100% 100%;

 

 

مع استخدام هذه الكود وهنا تستخدم صور bac.png وليس bac1.png لانه الصورة مبكسله اصلا
 

@media (max-width: 767.98px) {
header {
    background-image: url(../src/images/bac.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
 
  
}
}

او من الممكن استخدام

 background-size: cover;
 background-clip: border-box;

وسوف سكون شكلها هكذا

مع استخدام هذه الكود

@media (max-width: 767.98px) { 
header {
    background-image: url(../src/images/bac.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-clip: border-box;

  
}
}

اذ لم يظبط مع هذا الحل
فكدا لازن تصغر ال height الخاص ب header علي شاشات الموبيل

جربت تصغير ال header ولكن لم يحدث شئ هذا ما اريده وهو ضبط ال header

في البداية قم بازالة هذه الخصائص من داخل ال header  

header {
    background-image: url(../src/images/bac.jpg);
    background-size: cover ;
    background-attachment: fixed;
    background-position: center center;
    min-height: 100vh;
}

وقم بنقلها الى ال header .overlay 

header .overlay {
    background: rgba(0, 0, 0, 0.8);
    /*0 % , 100% تدل عل الموضع*/
    height: 100vh;
    /* اضف العناصر هنا */
}

ليصبح الكود كالتالي 

header .overlay {
    background: rgba(0, 0, 0, 0.8);
    /*0 % , 100% تدل عل الموضع*/
    height: 100vh;
    /* اضف العناصر هنا */
    background-image: url(../src/images/bac.jpg);
    background-size: cover ;
    background-attachment: fixed;
    background-position: center center;
    min-height: 100vh;
}

ثم ان هذه الخصائص تتغير عند تغيير الاحجام لذلك يجب عليك وضعها عند القسم المراد تغييرها بها وتغيير فقط هاتان الخاصيتان المشار اليهم حسب الحجم المطلوب 

@media (max-width: 767.98px) {

  header .overlay {
    background: rgba(0, 0, 0, 0.8);
  /* قمت بتغيير الارتفاع هنا الى 70 px */
    height: 70vh;
    background-image: url(../src/images/bac.jpg);
    background-size: cover ;
    background-attachment: fixed;
    background-position: center center;
    /* قمت بتحديد الحد الادنى للارتفاع 50 */
    min-height: 50vh;
}
}

لتصبح النتيجة كالتالي :

الان دعنا نقوم بتغيير اماكن الكتابة والازرار لتصبح متناسبة اكثر مع الحجم الجديد 

اضف هذا الكود اسفل الكود السابق لرفع الكتابة للاعلى قليلا 

header .overlay .slider .carousel-inner .carousel-item .carousel-caption {
    bottom: 40%;
}

ثم اضف هذا الكود لرفع الازرار للاعلى قليلا 

header .overlay .slider .carousel-control-prev ,
header .overlay .slider .carousel-control-next {
    top : auto ;
    bottom: 50%;
    width: auto;
}

طبعا يمكنك تغير الاحجام حسب الرغبة 

وهذا هو المشورع المعدل تستطيع الاطلاع على التغيرات واضافتها الى المشورع الخاص بك او التعديل على المشروع الحالى حسب الرغبة

بالتوفيق لك ..
 

DR.Scan.zip