عکسهای پشت زمینه و موقعیت آنها

شما می توانید در صورت تمایل در قسمت های مختلف صفحه، تصویر پشت زمینه ایجاد نمایید. ویژگی css برای این کار background-image می باشد. برای مقدار، آدرس محل قرار گیری عکس به  ویژگی نسبت داده می شود. آدرس در میان پرانتز ها و بعد از کلمه url قرار می گیرد:

BODY {

background-image: url('my_image.gif');

}

قواعدی که برای آدرس دهی تصاویر بکار برده می شود در این قسمت هم کارایی دارد. بنابراین در قطعه کد بالا، به تصویری که در همان پوشه ای که فایل وب جاری قرار دارد، اشاره شده است. چنانچه فایل تصویر پشت زمینه در پوشه ای به نام background قرار داشت، کد به دو شکل زیر نوشته می شد:

BODY {

background-image: url('backgrounds/my_image.gif');

}

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

چیدمان تکرار تصاویر پشت زمینه همیشه کارایی ندارند. مانند تصاویر زیر:

تصویر پشت زمینه که در شکل بالا به کار گرفته شده است، ابعادی به اندازه 200*200 پیکسل دارد. این اندازه عرض تصویر را به خوبی پوشش داده است، اما پوشش طولی آن مناسب به نظر نمی رسد. برای تنظیم چیدمان تصاویر پشت صحنه، از ویژگی background-repeat استفاده می شود. این ویژگی، چهار مقدار قبول می کند:

 Repeat-x

Repeat-y

Repeat

N o-repeat 

برای تصویر  فوق، کافیست که تنها تصویر به صورت افقی و در امتداد محور x ها تکرار شود. بنابراین css به صورت زیر خواهد بود:

BODY {

background-image: url('backgrounds/my_image.gif');
background-repeat: repeat-x;

}

حال  پشت زمینه به شکل زیر خواهد شد:

که بسیار زیباتر به نظر می رسد.

موقعیت پشت زمینه

وقتی می توانید یک موقعیت مکانی برای تصاویر پشت زمینه ایجاد نمایید برای این منظور، از ویژگی background-position استفاده می شود. این ویژگی مقادیر زیر را قبول می کند:

Top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

اما همچنین می توانید از اندازه های دقیق x و y استفاده نمایید. همچنین می توان از درصد استفاده کرد. بعنوان تمرین، فرض کنید که می خواهید یک لوگو در بالا و سمت راست صفحه داشته باشید. برای این منظور از پشت زمینه به شکل زیر استفاده خواهد شد:

BODY {

background-image: url('backgrounds/logo_brolly.gif');
background-position: top right;
background-repeat: no-repeat;

}

نتیجه به شکل زیر خواهد بود:

دقت نمایید که از ویژگی background-repeat با مقدار no-repeat استفاده شده است، در غیر اینصورت ما صفحه ای پر از چتر خواهیم داشت.

چند مثال برای سایر مقادیر قابل استفاده:

background-position: 300px 100px;

background-position: 80% 0%;

با مقادیر پیکسلی، ابتدا مسیر  xو سپس مسیر y تعیین می شود. دو مقدار با یک فاصله از هم جدا می شوند. برای درصد نیز به همین صورت می باشد. ابتدا مسیر  x و سپس مسیر y که با فاصله از هم جدا شده اند.

آنها را به عنوان تمرین انجام دهید. در صورت نیاز به فایل های اضافه بعنوان تصاویر پشت زمینه، می توانید آنها را از این قسمت دانلود نمایید.