چگونه ایجاد می‌شود: تصویر کامل صفحه
- صفحه قبل نوشته‌های تصویری شفاف
- صفحه بعدی فرم‌های موجود بر روی تصاویر
آموزش نحوه استفاده از CSS برای ایجاد تصویر پس‌زمینه کامل صفحه.
تصویر کامل صفحه
آموزش نحوه ایجاد تصویر پس‌زمینه‌ای که کل پنجره مرورگر را پوشش می‌دهد. مثال زیر تصویر پس‌زمینه‌ای برای صفحه کامل (و نصف صفحه) را نشان می‌دهد که به صورت پاسخگو است:
چگونه تصویر کامل ارتفاع ایجاد کنیم
از یک عنصر قالب‌بندی استفاده کنید و به آن یک تصویر پس‌زمینه با ارتفاع 100% اضافه کنید.
نکته:استفاده از 50% می‌تواند تصویر پس‌زمینه نصف صفحه را ایجاد کند. سپس از ویژگی‌های پس‌زمینه زیر برای قرار دادن و بزرگ‌کردن دقیق تصویر استفاده کنید:
توجه داشته باشید که:برای اطمینان از اینکه تصویر کل صفحه نمایش را پوشش می‌دهد، شما باید height: 100% همزمان اعمال می‌شود به <html> و <body>:
تصویر پس‌زمینه صفحه کامل:
body, html {
height: 100%;
}
.bg {
/* تصویری که استفاده می‌شود */
background-image: url("dancer.jpg");
/* تمام ارتفاع */
height: 100%;
/* بسیار خوب در وسط قرار می‌گیرد و تصویر را به صورت مناسب بزرگ می‌کند */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
تصویر پس‌زمینه نیم صفحه:}
.bg {
height: 50%;
}
- صفحه قبل نوشته‌های تصویری شفاف
- صفحه بعدی فرم‌های موجود بر روی تصاویر
