تنظیمات بک گراند (background) عناصر در CSS

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

استفاده از رنگ

تعیین رنگ به عنوان بک گراند به دو روش امکان پذیر است.

div{
    background: red;
}
div{
    background-color: red;
}

مثال: پرچم ایران را با استفاده از div ها ایجاد نمایید.

تحلیل: برای حل این تمرین نیاز به سه div با اندازه یکسان اما رنگ متفاوت می باشد. از آنجا که div دارای عرض و ارتفاع یکسان یکسان ولی رنگ متفاوت می باشند، ویژگی های مشترک را به وسیله tag selector و ویژگی های منحصربفرد را توسط id selector اعمال میکنیم.

<!DOCTYPE html>
<html>
  <head>
    <title>Beno Academy | Css Tutorial</title>
    <style>
        body{
            background: lightgrey;
        }
        div{
            width: 300px;
            height: 100px;
        }
        #green{
            background: green;
        }
        #white{
            background: white;
        }
        #red{
            background: red;
        }
    </style>
  </head>
  <body>
      <div id="green"></div>
      <div id="white"></div>
      <div id="red"></div>
  </body>
</html>

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

استفاده از تصویر

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

body{
    background: url('image/bg.png');
}
body{
    background-image: url('image/bg.png');
}

نکته: هنگام استفاده از تصاویر دقت نمایید که حتما پسوند آن به درستی ذکر شود.

پس از تعیین تصویر می توانید نحوه قرارگیری آن را نیز با استفاده از خواص زیر تعیین نمایید:

background-repeat

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

  • no-repeat: عدم تکرار تصویر.
  • repeat-x: تکرار بصورت افقی.
  • repeat-y: تکرار عمودی.
body{
    background-image: url('image/bg.png');
    background-repeat: no-repeat;
}

background-size

توسط این خاصیت می توان اندازه بک گراند را تعیین نمود که دو عدد را می توان به آن اختصاص داد. عدد اول برای عرض و دومی برای ارتفاع.

body{
    background-image: url('image/bg.png');
    background-repeat: no-repeat;
    background-size: 800px 500px;
}

در صورتیکه برای این خاصیت مقدار cover ذکر شود، تصویر تعیین شده را طوری تغییر اندازه می دهد که کل صفحه را بپوشاند.

body{
    background-image: url('image/bg.png');
    background-repeat: no-repeat;
    background-size: cover;
}

background-position

برای تعیین موقعیت قرارگیری بک گراند تعیین می شود که دو مقدار را می توان برای آن تعیین نمود. مقدار اول موقعیت عمودی و مقدار دوم موقعیت افقی. برای موقعیت عمودی تنها از مقدار top و برای موقعیت عمودی از یکی از مقادیر زیر استفاده نمایید.

  • right
  • center
  • left
body{
    background-image: url('image/bg.png');
    background-repeat: no-repeat;
    background-position: top center;
}

background-attachment

از این خاصیت در مواقعی استفاده می شود که قصد داشته باشید بک گراند خود را ثابت نگه دارید و محتوا حرکت کند. بدین منظور می توانید مقدار fixed را به آن اختصاص دهید.

body{
    background-image: url('image/bg.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-attachment: fixed;
}

این تنظیمات طبیعتا زمانی اثر بخش خواهد بود که ارتفاع محتوا از نظر عمودی بیش از ارتفاع صفحه باشد، به عبارتی دیگر صفحه دارای اسکرول عمودی باشد.

تنظیمات توضیح داده شده برای گراند، همگی بصورت یکجا توسط خاصیت background نیز بصورت زیر قابل اعمال می باشند.

body{
    background: lightgrey url('image/bg.png') no-repeat top center ;
}

مثال: تصویری به عنوان بک گراند صفحه تعیین کرده و آن را طوری تنظیم که با اندازه 400 در 200 در بالا سمت راست صفحه قرار گیرد.

body{
    background-color: lightgrey;
    background-image: url('image/bg.png');
    background-size: 400px 200px;
    background-position: top right;
}

استفاده توأم از تصویر رنگ به عنوان بک گراند تکنیک مناسبی می باشد که در صورت لود نشدن تصویر، رنگ مناسبی نمایش داده شود، به شرطی که این رنگ با محتوای صفحه همخوانی داشته باشد.