آموزش طراحی وب

نحوه ایجاد background بصورت ریسپانسیو

در این مقاله نحوه ایجاد background بصورت ریسپانسیو رو آموزش میدیم .

articles

آموزش طراحی background بصورت ریسپانسیو

سلام خدمت همراهان همیشگی مدرسه مجازی ایرانیان

یکی از دوستان تو بخش پرسش و پاسخ سوالی مطرح کرده بودن که چطور می تونم background سایتم و بصورت رسپانسیو طراحی کنم؟

شاید این مشکل خیلی از دوستان باشه ، گفتم یه مقاله در این زمینه براتون تهیه کنم .

تو این مقاله میخوایم برای background صفحه ی سایتمون یه عکس رو در نظر بگیریم که در رزولوشن های متفاوت تغییر اندازه پیدا می کنه و بصورت واکنشگرا هست.

برای این کار لازمه جلسه ی آموزشی در رابطه با background رو در بخش  css مطالعه بفرمایید . پس از مطالعه ی این جلسه ی آموزشی میتونید به راحتی این مقاله رو درک کنید .

خوب میریم سر اصل مطلب که آموزش باشه 🙂

برای اینکار کافیه شما یه تصویر در سایز نسبتا بزرگ رو انتخاب کنید و به صورت زیر برای پس زمینه سایتتون تعریف کنید:

در کد بالا گفتیمکه تصویر پس زمینه تکرار نشدنی باشه ، از مرکز تصویر شروع به نمایش کنه و در صفحه بصورت ثابت و fixed قرار بگیره .

حالا میخوایم بگیم با تغییر رزولوشن تصویر پس زمینه هم تغییر اندازه پیدا کنه .  برای این کار باید background رو انعطاف پذیر کنیم و از کد زیر استفاده می کنیم :

 

به همین راحتی ، حالا شما یه پس زمینه ریسپانسیو دارید 🙂

امیدوارم این مقاله مورد استفادتون قرار بگیره .

موفق و پاینده باشید .

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۶

    • سلام دوست عزیز
      اگر به درستی انجام شده باشه حتما جواب میده، من همیشه از همین دستور استفاده میکنم.

    • سلام دوست عزیز
      این سایت رو بستیم که ورودی از این سایت نداشته باشیم.
      لینک ها تعویض شده اگر لینکی تو مدرسه ، از این سایت بود گزارش بدید تا تغییر بدیم.
      لینک این بخش هم اصلاح شد.
      موفق و پاینده باشید

  • ببخشید میشه یه نمونه درست کنید بزارید اینجا.چون مکن هر کاری میکنم جواب نمیده

  • دمت گرم کار کرد
    بچه ها برای این که مشکلتون رفع بشه کل کد های بالا رو بزارید بعد اون ۲تا center رو بر دارید

    مشکلتون حل میشه

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی