آموزش BackGround در CSS3

CSS 3 قابلیت‌های جدید و پیشرفته‌ای برای مدیریت و کنترل پس‌زمینه‌ها در طراحی وب ارائه کرده است که به طراحان اجازه می‌دهد به سادگی و با انعطاف‌پذیری بیشتری تصاویر پس‌زمینه را سفارشی‌سازی کنند. این قابلیت‌ها شامل امکان افزودن چندین تصویر پس‌زمینه، کنترل بهتر بر اندازه و موقعیت تصاویر، و تعیین نحوه قرارگیری پس‌زمینه در المان‌ها است. در این مقاله به معرفی و بررسی این ویژگی‌های جدید پرداخته می‌شود.

افزودن چندین پس زمینه در CSS3

یکی از قابلیت‌های جذاب CSS 3 این است که می‌توانید چندین تصویر پس‌زمینه را با استفاده از خاصیت background-image به یک المان اضافه کنید. این تصاویر با استفاده از کاراکتر ویرگول از هم جدا شده و به ترتیب از اولین تصویر به سمت جلو (نزدیک‌ترین به کاربر) انباشته می‌شوند.

مثال: در مثال زیر، دو تصویر پس‌زمینه به یک المان اضافه شده‌اند. تصویر اول یک گل است که در گوشه‌ی پایین سمت راست قرار دارد و تصویر دوم یک کاغذ است که در گوشه‌ی بالا سمت چپ قرار داده شده است.

                                 
        #example1 { 
            background-image: url(img_flwr.gif), url(paper.gif); 
            background-position: right bottom, left top; 
            background-repeat: no-repeat, repeat; 
        }
    

همچنین می‌توانید از خاصیت background به‌صورت مختصرنویسی استفاده کنید تا تمام ویژگی‌های پس‌زمینه را در یک تعریف تنظیم کنید:

                                                      
        #example1 { 
            background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; 
        }
    

خاصیت background-size در CSS3

پیش از CSS 3، اندازه‌ی تصاویر پس‌زمینه همان اندازه‌ی اصلی تصویر باقی می‌ماند. با اضافه شدن خاصیت background-size در CSS 3، شما می‌توانید اندازه‌ی تصویر پس‌زمینه را بر حسب پیکسل، درصد یا با استفاده از کلیدواژه‌های contain و cover تغییر دهید.

تصویر اصلی:

زیر همان تصویر را مشاهده می کنید که مجدداً اندازه بندی شده است:

کد لازم برای عملیات فوق:

                                                      
        #div1 { 
            background: url(css3.jpg); 
            background-size: 100px 80px; 
            background-repeat: no-repeat; 
        }
    

استفاده از کلیدواژه‌های contain و cover

• contain: تصویر را تا حد ممکن بزرگ می‌کند که کل تصویر داخل ناحیه‌ی محتوا جای بگیرد. ممکن است بخشی از پس‌زمینه بدون تصویر باقی بماند.
• cover: تصویر را به‌گونه‌ای مقیاس می‌دهد که تمام ناحیه‌ی محتوا را بپوشاند، حتی اگر قسمتی از تصویر از ناحیه‌ی نمایش خارج شود.

                                                                   
            #div1 { 
                background: url(img_flower.jpg); 
                background-size: contain; 
                background-repeat: no-repeat; 
            } 
            #div2 { 
                background: url(img_flower.jpg); 
                background-size: cover; 
                background-repeat: no-repeat; 
            }
    

استفاده از چندین اندازه برای چندین تصویر پس‌زمینه

با استفاده از خاصیت background-size، می‌توانید برای هر تصویر پس‌زمینه، اندازه‌ی جداگانه‌ای تعریف کنید. مقادیر را با ویرگول از هم جدا می‌کنید:

                                                                                    
        #example1 { 
            background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat; 
            background-size: 50px, 130px, auto; 
        }
    

تصویر پس زمینه ی تمام صفحه

گاهی اوقات لازم است که یک تصویر پس‌زمینه تمام فضای پنجره‌ی مرورگر را پوشش دهد. در این حالت، باید از background-size: cover استفاده کنید تا تصویر پس‌زمینه همیشه متناسب با اندازه‌ی پنجره مقیاس داده شود. این ویژگی کمک می‌کند تصویر به‌صورت کاملاً دینامیک عمل کند و اسکرول بار اضافی نیز ایجاد نشود.

       
        html {
            background: url(img_flower.jpg) no-repeat center center fixed;
            background-size: cover;
        }
    

خاصیت background-origin در CSS3

خاصیت background-origin تعیین می‌کند که تصویر پس‌زمینه از کجا شروع شود. این خاصیت می‌تواند سه مقدار داشته باشد:

• border-box: تصویر از گوشه‌ی بالا سمت چپ حاشیه‌ی المان شروع می‌شود.
• padding-box (پیش‌فرض): تصویر از گوشه‌ی بالا سمت چپ قسمت padding شروع می‌شود.
• content-box: تصویر از گوشه‌ی بالا سمت چپ محتوا شروع می‌شود.

مثال زیر کاربرد خاصیت background-origin را نمایش می دهد:

     
        #example1 {
            border: 10px solid black;
            padding:35px;
            background:url(img_flwr.gif);
            background-repeat: no-repeat;
            background-origin: content-box;
        }
    

خاصیت background-clip در CSS3

این ویژگی به منظور تعیین مکان و نحوه قرار گیری پس زمینه در عنصر مورد نظر بکار گرفته می شود.
خاصیت background-clip سه مقدار متفاوت می پذیرد که به شرح زیر است:

• border-box (پیش‌فرض): تصویر پس‌زمینه تا لبه‌ی بیرونی حاشیه‌ی المان ادامه پیدا می‌کند.
• padding-box: تصویر پس‌زمینه فقط در داخل padding المان قرار می‌گیرد.
• content-box: تصویر پس‌زمینه فقط در محدوده‌ی محتوای المان نمایش داده می‌شود.

مثال زیر این خاصیت را کاربردی نمایش می دهد:

     
        #example1 { 
            border: 10px dotted black; 
            padding:35px; 
            background: yellow; 
            background-clip: content-box; 
        }
    

کلیه ی خصوصیات مربوطه به پس زمینه در جدول زیر با ذکر شرح آن ارائه گردیده: