تصویر پس زمینه (Background Images)
با «تصویر پس زمینه (Background Image)» می توان برای هر عنصر، عکس پس زمینه گذاشت. «ویژگی (Attribute)» تنظیم یک تگ است. «خاصیت (Property)» تنظیم در CSS است. الان ساده و مرحله ای می رویم جلو.
پس زمینه برای یک عنصر HTML
می توانید با ویژگی style و خاصیت background-image روی یک عنصر پس زمینه بگذارید.
<p style="background-image: url('img_girl.jpg');">
همچنین می توانید همین کار را داخل تگ <style> انجام دهید.
<style>
p {
background-image: url('img_girl.jpg');
}
</style>
پس زمینه برای کل صفحه
اگر کل صفحه باید پس زمینه داشته باشد، روی تگ <body> تنظیم کنید.
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
تکرار پس زمینه (background-repeat)
اگر تصویر از عنصر کوچک تر باشد، به صورت پیش فرض تکرار می شود. برای جلوگیری، از background-repeat: no-repeat; استفاده کنید.
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
کاور کردن عنصر (background-size: cover)
برای پوشاندن کامل عنصر، از background-size: cover; استفاده کنید. همچنین background-attachment: fixed; کمک می کند همیشه پوشیده بماند.
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
کشیدن تصویر تا پر شود (100% 100%)
اگر می خواهید تصویر کش بیاید و دقیقاً پر کند، از background-size: 100% 100%; استفاده کنید.
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
گام های عملی سریع
- تصویر را با
background-imageتنظیم کنید. - در صورت نیاز،
no-repeatرا بگذارید. - برای پوشاندن کامل،
coverرا فعال کنید.
جمع بندی سریع
- برای کل صفحه، روی body تنظیم کنید.
- تکرار را با no-repeat متوقف کنید.
- کاور کامل با background-size: cover;
- پر کردن دقیق با 100% 100% ممکن است.