در این آموزش قصد داریم به ساده‌ترین تکنیک‌ها برای دست‌یابی به تصویر پس‌زمینه‌ی تمام صفحه که کل صفحه‌نمایش کاربر را پر کند و پوشش دهد، بپردازیم. قرار است این کار را با استفاده از background-size و بدون هیچ کد جاوااسکریپتی، انجام دهیم.
مثال‌هایی از تصاویر پس زمینه کامل و واکنشگرا
انتخاب یک تصویر بزرگ به عنوان پس زمینه یک صفحه‌ی وب، کاری بسیار متدوال و مرسوم شده است.
در زیر چند مورد از وبسایت‌هایی که از این قابلیت استفاده می‌کنند را مشاهده می‌کنید:
اگر شما نیز قصد دارید چنین تصاویر پس‌زمینه‌ای را در پروژه‌ی وب بعدیتان استفاده کنید، به مکان درستی آمده‌اید.
مفاهیم اصلی
در زیر می‌توانیم روند این مقاله را برا رسیدن به هدفمان، ببینیم.
استفاده از پراپرتی background-size برای پوشش دادن تمام صفحه‌ی نمایش
پراپرتی background-size می‌تواند مقدار cover را بپذیرد. این مقدار به مرورگر می‌گوید که باید به شکل خودکار و متناسبی، تصویر پس زمینه را اسکیل و مقیاس‌پذیر کند. این کار شامل تغییر عرض و ارتفاع تصویر می‌باشد. در نتیجه تصویری که این پراپرتی را داراست، همیشه عرضی بزرگ‌تر یا برابر با عرض صفحه و همچنین ارتفاعی بزرگ‌تر یا برابر با ارتفاع صفحه نمایش کاربر، خواهد داشت.
استفاده از مدیا کوئری برای قرار دادن تصویری کوچک‌تر برای موبایل‌ها
برای افزایش سرعت لود صفحه بر روی صفحه نمایش‌های کوچک، از media queryها استفاده می‌کنیم. برای این که بر روی موبایل، تصویری کم حجم‌تر لود شود وتجربه‌ی کاربر را با افزایش سرعت لود صفحه، بهبود بخشیم. این کار البته که اختیاری می‌باشد و بدون این تکنیک نیز، کار ما درست خواهد بود.
اما چرا لود کردن تصویری کوچک‌تر برای موبایل‌ها، ایده‌ی خوبی است؟
ممکن است تصویری که می‌خواهیم از آن به عنوان پس زمینه‌ی وبسایتمان بر روی کامپیوترها استفاده کنیم، 5500x3600px باشد! این ابعاد برای وبسایتمان هنگامی که توسط کامپیوترها نمایش داده می‌شود، ممکن است بسیار مناسب باشد؛ اما کاربران باید فایلی با حجم ۱.۷ مگابایت را برای دیدین صفحه‌ی وبسایتمان، دانلود کنند.
این حجم از تصویر دانلودی برای یک صفحه‌ی وبسایت و به عنوان تصویر پس زمینه‌ی آن، اصلا چیز خوبی نیست. مخصوصا هنگامی که کاربر ما از موبایل استفاده می‌کند؛ چرا که این حجم از تصویر برای صفحه نمایش یک دستگاه موبایل، زیادی با کیفیت و پر حجم است.
بیاید این مراحل را عملی کنیم
HTML
کد زیر تمام چیزی است که به آن به عنوان html تان، نیاز دارید:
<!doctype html>
<html>
<body>
...Your content goes here...
</body>
</html>قرار است تصویر پس زمینه را به المنت body تخصیص دهیم تا درنهایت پس‌زمینه‌ای داشته باشیم که تمام صفحه‌ی مرورگر کاربران را پرکند.
البته که این تکنیک بر روی تمامی المنت‌های block-level نیز جواب می‌دهد. المنت‌هایی مثل div و form. اگر عرض و ارتفاع المنت بلاکی شما، fluid است، تصویر پس زمینه نیز همیشه خود را برای پرکردن تمام آن، تطبیق می‌دهد.
CSS
یک rule برای المنت body به شکل زیر تعریف می‌کنیم:
{
/* Location of the image */
background-image: url(images/background-photo.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}مهم‌ترین پراپرتی کد بالا، background-size: cover; می‌باشد.
این پراپرتی و مقدار آن، جادوی ما را انجام می‌دهند؛ چرا که مرورگر را مجبور به مقیاس‌پذیر کردن تصویر پس زمینه، به شکلی متناسب و بدون دفورمه شدن، می‌کند. به این ترتیب که نسب عرض به ارتفاع، همیشه برابر یا بزرگ‌تر از این نسبت در المنتی که شامل این تصویر پس زمینه شده است، باشد. (در این مثال این المنت body می‌باشد)
البته مقدار cover یک مشکل دارد و آن این است که اگر صفحه نمایش کاربر شما بسیار بزرگ باشد، تصویری که به عنوان پس زمینه قرار داده‌اید، برای این که تمام صفحه را پرکند، سایز خود را بزرگ کرده و ممکن است دچار افت کیفیت شود. البته که این اتفاق ممکن است زمانی که در صفحه‌تان محتواهای بسیار زیادی و طولانی نیز قرار داده‌اید، هم اتفاق بیوفتد. این اتفاق معروف به پیکسل شدن (pixelation) نیز است.
وقتی یک تصویر از ابعاد اصلی آن بزرگ تر بشود، کیفیت آن، تحت تاثیر قرار می‌گیرد. به خاطر داشته باشید که چه تصویری را برای پس زمینه انتخاب می‌کنید. ابعاد 5500x3600px می‌تواند برای تصویرتان مناسب باشد؛ چون اگر مقداری از این با کیفیت‌تر انتخاب کنید، واقعا بهینه نیست.
پس با استفاده از کد زیر، تصویر پس زمینه همیشه در وسط صفحه‌ی نمایش، قرار خواهد گرفت.
background-position: center center;سپس باید به زمانی فکر کنیم که محتوای المنت ما، ارتفاعی بیش از ارتفاع صفحه نمایش کاربر، بگیرد. اگر این اتفاق بیوفتد، یک scroll bar به نمایش در خواهد آمد.
پس کاری که باید بکنیم، این است که حتی زمانی که کاربر به پایین اسکرول می‌کند، تصویر پس‌زمینه‌ی ما، ثابت بماند. در غیر این صورت، در انتهای صفحه، تصویر پس‌زمینه‌ای نخواهیم داشت یا بدتر از آن، هنگام اسکرول کردن کاربر، تصویر پس زمینه نیز اسکرول می‌خورد. برای جلوگیری از این موارد، قطعه کد زیر را می‌نویسیم.
background-attachment: fixed;شما میتوانید با این مقادیر بازی کنید تا به درک بهتری از این پراپرتی‌های کاربردی CSS برسید و بتوانید در موقعیت‌های مناسب، از آن‌ها به درستی در کار خود استفاده کنید و تاثیر هرکدام از آن‌ها را روی نتیجه‌ی نهایی خود، ببینید.
خلاصه‌نویسی CSS
من پراپرتی‌های background را به طور مجزا و به شکلی کامل برای فهم بهتر شما، نوشته‌ام.
قطعه کد زیر معادل کدهای گفته شده در بالا است:
body {
background: url(background-photo.jpg) center center cover no-repeat fixed;
}تمام کاری که شما برای خود باید بکنید، تغییر url و قرار دادن آدرس تصویر مورد نظرتان، برای قرار گرفتنش بر روی پس زمینه، است.
بخش اختیاری (استفاده از media query برای صفحات کوچک)
من با استفاده از فتوشاپ، تصویر پس‌زمینه‌ی خود را به 768x505px تنزل دادم و بعد با استفاده از Smush.it هم باز هم آن را بهینه‌تر کردم تا بتوانم آن را در صفحات موبایل به عنوان پس زمینه استفاده کنم. با این کارها حجم فایل را توانستم از 1741 کیلو بایت به 114 کیلو بایت برسانم. یعنی بهینه‌سازی نود و سه درصدی.
لطفا برداشت اشتباه از این کار من نکنید. هنوز هم ۱۱۴ کیلوبایت به عنوان یک جز در طراحی صفحه‌ی وب، زیاد است. پس بهتر است تنها در مواقعی از چنین فایل‌هایی استفاده کنیم که بتوانیم تجربه‌ی کاربر را با استفاده از آن‌ها، به شکلی چشم‌گیر، بهبود بخشیم و ارزش این کاهش کارایی در موبایل را داشته باشد.
این هم کد مربوط به مدیا کوئری این بخش:
@media only screen and (max-width: 767px) {
body {
/* The file size of this background image is 93% smaller
to improve page load speed on mobile internet connections */
background-image: url(images/background-photo-mobile-devices.jpg);
}
}این مدیا کوئری بر روی max-width: 767px; تنظیم شده که به این معناست که در صفحات نمایش کوچک‌تر از ۷۶۷ پیکسل، این تصویر بهینه شده، جایگزین تصویر قبلی، به عنوان پس زمینه می‌شود.
البته که نقطه ضعف استفاده از مدیا کوئری بالا این است اگر شما حتی بر روی کامپیوتر باشید، اما پنجره‌ی مرورگر خود را کوچک‌تر از ۷۶۷ پیکس کنید، تصویری بهنیه شده برای موبایل، به نمایش در می‌آید و شما میتوانید در هنگام کوچک کردن پنچره‌ی مرورگر خود، به صورت لحظه‌ای، متوجه این جا به جایی دو تصویر با یکدیگر شوید.
علاوه بر این نقطه ضعف دیگری نیز وجود دارد؛ برخی از موبایل‌ها مثل iPhone 5 که رزولوشن بالایی (1136x640px) را پشتیبانی می‌کنند، در هنگام نمایش دادن تصویر بهینه شده برای موبایل، دچار پیکسل شدن می‌شوند.
نتیجه‌گیری
نکته‌ای لازم به ذکر است که باید راجع به آن در این تکنیک احتیاط کنید؛ لطفا از این قابلیت با احتیاط استفاده کنید. چرا که تصاویر حجیم و باکیفیت می‌توانند تاثیر بدی روی تجربه‌ی کاربر از وبسایت شما بگذارد. مخصوصا اگر کاربران شما دارای اینترنت مطمئن و پرسرعتی نباشند. به همین دلیل رنگ پس زمینه نیز باید به شکلی مناسب انتخاب کنید تا اگر مرورگر کاربر قادر به نمایش تصویر زمینه‌ی مورد نظر شما نبود، به جای آن رنگ پس‌زمینه‌ی مناسبی برای کاربر به نمایش در آید.
همچنین بهینه‌سازی تصاویر را همیشه سعی کنید قبل از آپلود آن تصویر بر روی وب‌سایتتان، انجام دهید.
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید