پرسش و پاسخ – کار با پس زمینه ها در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با پرسش و پاسخ – کار با پس زمینه ها در CSS با من همراه باشید.
Free-Learn
پرسش از شما، پاسخ از بنده تا جایی که بتونم و در توانم باشه، لطفا پرسش تان را فقط در رابطه با بخش مشخص شده ارسال نمایید تا نظم و ترتیب در بخش پرسش و پاسخ بخوبی رعایت شود.
درود.
من میخوام عکس را به طور کامل و تمام صفحه در پس زمینه قرار بدم، اما با ویژگیهای : cover و contain تصویر به طور کامل فیکس نمیشه… به نظر شما چکار کنم؟
با سلام و عرض ادب
لطفا این مثال را بررسی نمایید
با تشکر
با عرض تشکر، این راه رو امتحان کردم ولی هیچ تاثیری نداشت!
سلامی مجدد
همانطور که مشاهده میکنید مثال بخوبی نشون داده میشه و مشکلی نداره لطفا کدهارو دوباره بهشون توجه کنید و هرچیزی که در مثال هست در پروژه خودتون بکار ببرید.
اگه باز با مشکل برخوردید لطفا کدهاتون رو بفرستید به ایمیل تا مشکلتون حل بشه
با تشکر
کدهارو از همین مثال کپی کردم و فقط اسم و آدرس تصویر رو عوض کردم!
از اون کلاس my-bg توی تگ body استفاده کنید
آدرس تصویر هم چک کنید که تصویر مشکلی نداشته باشد
این تصویر کدها :
https://files.free-learn.ir/myhelp/css/upload_user/user_0001.png
کدها که مشکلی ندارند احتمالا مشکل از طرف خودتون و تصویر و مسیر تصویر هست
حالا باز کمی بعدتر یه فایل براتون میفرستم اونم امتحان کنید باید جواب بگیرید ازش
لطفا این فایل رو دانلود و ازش استفاده نمایید اگه بازم مشکل بود بگید، ولی نباید مشکلی باشه
برای دانلود کلیک کنید
درود مجدد. شرمنده که مزاحم میشم
به این صورت نمایش میده :
https://files.free-learn.ir/myhelp/css/upload_user/user_0002.png
خب دیگه الان تصویر تمام صفحه هست فقط ممکنه مشکلتون با قسمت هایی از تصویر هست که کامل در قاب نمایش داده نمیشوند، اونو دیگه باید با استفاده از background-position مشخص کنید که کدوم بخش نمایش داده شود، مثلا center یا top . ( آموزش ویژگی background-position در css )
یک نمونه دیگه از تصویر تمام صفحه ( کلیک کنید )
باتشکر
ممنونم. بله درست میفرمایید، دقیقاً مشکلم این هست که قسمتهایی از تصویر نمایش داده نمیشه، که در کامنت اول هم عرض کردم…
پس اینجور که پیداست برای بعضی از تصاویر نمیشه کامل نمایش داد و بخوای نخوای باید قسمتی رو حذف کرد!
برای نمایش تمام ابعاد تصویر میتونید از ۲ مقدار ۱۰۰ درصد در ویژگی background-size استفاده کنید ولی خب بازم یسری مشکلات هست مثلا هرچی صفحه کوچکتر شه تصویر توخودش جمع تر میشه که در ظاهر جذاب نیست ولی میتونید امتحان کنید
برای مشاهده مثال کلیک کنید
دقیقاً، درسته. بسیار متشکر.