تگ بک گراند در html
تگ بک گراند در html در طراحی صفحات وب، بکگراند (پسزمینه) نقش مهمی در زیبایی و تجربه کاربری دارد. در ادامه آموزش این تگ کامل توضیح داده شده است. در نسخههای قدیمی HTML، از ویژگی background در تگهایی مانند <body> برای تعیین تصویر پسزمینه استفاده میشد، اما این روش امروزه منسوخ شده است.
در طراحی مدرن، از CSS برای کنترل کامل پسزمینه استفاده میشود؛ به کمک ویژگیهایی مانند background-image، background-color، background-size و background-position، طراحان میتوانند ظاهر صفحات را بهصورت دقیق و حرفهای تنظیم کنند. استفاده از CSS باعث جدا شدن محتوا از طراحی، بهبود ساختار کد، و افزایش انعطافپذیری در طراحی سایت میشود.
ویژگیهای مهم مربوط به بکگراند در CSS
background-color: رنگ پسزمینه را تعیین میکند.
background-image: یک تصویر به عنوان پسزمینه تعیین میکند.
background-repeat: مشخص میکند که تصویر پسزمینه تکرار شود یا خیر.
background-position: مکان قرارگیری تصویر در صفحه را تنظیم میکند.
background-size: اندازه تصویر را کنترل میکند (مثلاً
coverبرای پوشش کامل یاcontainبرای نمایش کامل تصویر بدون برش).background-attachment: تعیین میکند که تصویر پسزمینه در هنگام اسکرول کردن صفحه حرکت کند یا ثابت بماند.
ارائه خدمات مشاوره کسب و کار رایگان در جهت توسعه فروش، رشد کسب و کار و تغییر موقعیت برند شما پنج شنبه های هر هفته
بک گراند تمام صفحه در html
بکگراند (پسزمینه) تمامصفحه یکی از رایجترین عناصر طراحی مدرن وب است که تاثیر بصری بالایی بر تجربه کاربری دارد. در طراحی یک وبسایت حرفهای، اغلب نیاز است که تصویری، رنگی یا حتی ویدیویی به عنوان پسزمینهی کل صفحه مورد استفاده قرار گیرد. اگرچه HTML به تنهایی قابلیتهای محدودی برای کنترل ظاهر صفحه دارد، اما ترکیب HTML و CSS امکان ایجاد پسزمینههای تمامصفحه را به شیوهای استاندارد و حرفهای فراهم میکند.
در گذشته، برخی طراحان از ویژگی background در تگ <body> استفاده میکردند، اما این روش منسوخ شده و استفاده از CSS به عنوان روش رسمی و توصیهشده جایگزین آن شده است. برای ایجاد یک بکگراند تمامصفحه در HTML، باید ویژگیهای CSS بهدرستی تنظیم شوند تا تصویر یا رنگ انتخابی کل صفحه را بپوشاند، بدون اینکه نسبت ابعاد یا موقعیت آن بههم بریزد.
یک نمونهی ساده برای استفاده از تصویر بهعنوان پسزمینه تمامصفحه بهصورت درونخطی (inline) در تگ <body> به شکل زیر است:
<body style=”margin: 0; background-image: url(‘background.jpg’); background-size: cover; background-repeat: no-repeat; background-position: center center;”>
<!– محتوای صفحه –>
</body>
در این مثال:
margin: 0;باعث حذف حاشیه پیشفرض مرورگر میشود.background-imageتصویر موردنظر را بارگذاری میکند.background-size: cover;تصویر را به گونهای تغییر اندازه میدهد که تمام صفحه را بدون کشیدگی بپوشاند.background-repeat: no-repeat;از تکرار تصویر جلوگیری میکند.background-position: center center;تصویر را در مرکز صفحه قرار میدهد.
این روش در تمامی مرورگرهای مدرن پشتیبانی میشود و از نظر عملکرد و سازگاری بسیار مناسب است. همچنین برای کنترل بیشتر، میتوان این استایل را در یک فایل CSS جداگانه تعریف کرد تا نگهداری و ویرایش آسانتری داشته باشد.
علاوه بر تصویر، میتوان از رنگهای گرادیانی (شیبدار) یا حتی ویدیو به عنوان بکگراند تمامصفحه استفاده کرد. برای نمونه، یک گرادیان رنگی ساده به صورت زیر قابل پیادهسازی است:
body { margin: 0; height: 100vh; background: linear-gradient(to right, #ffcc00, #ff6600); }
ارائه خدمات اندیشه دیجی
روش های تنظیم بک گراند در html
در طراحی وب، تنظیم بکگراند (پسزمینه) یکی از عناصر مهم در ایجاد جلوههای بصری جذاب و کاربرپسند است. در HTML، روشهای مختلفی برای تعیین پسزمینه وجود دارد که امروزه عمدتاً با استفاده از CSS انجام میشود. در ادامه به رایجترین روشهای تنظیم بکگراند در صفحات HTML اشاره میشود:
استفاده از رنگ به عنوان بکگراند: سادهترین روش، استفاده از رنگ است. این کار با ویژگی background-color در CSS انجام میشود:
<body style=”background-color: #f0f0f0;”>
<!– محتوای صفحه –>
</body>
در این مثال، رنگ پسزمینه کل صفحه به خاکستری روشن تنظیم شده است.
استفاده از تصویر به عنوان بکگراند: برای قرار دادن یک تصویر به عنوان پسزمینه، از ویژگی background-image استفاده میشود:
<body style=”background-image: url(‘bg.jpg’);”>
<!– محتوای صفحه –>
</body>
این تصویر به صورت پیشفرض تکرار میشود مگر اینکه با ویژگیهای تکمیلی کنترل شود.
تنظیم اندازه، تکرار و موقعیت بکگراند: برای کنترل بهتر تصویر پسزمینه میتوان ویژگیهای زیر را نیز استفاده کرد:
body {
background-image: url(‘bg.jpg’);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
background-size: coverتصویر را بهگونهای تنظیم میکند که تمام صفحه را بپوشاند.background-repeat: no-repeatمانع از تکرار تصویر میشود.background-position: center centerتصویر را در مرکز صفحه قرار میدهد.
استفاده از گرادیان (شیب رنگی): با CSS میتوان از گرادیانها نیز به عنوان پسزمینه استفاده کرد:
body {
background: linear-gradient(to right, #ff9966, #ff5e62);
}
تنظیم بکگراند در HTML با استفاده از CSS، ابزار قدرتمندی برای زیباسازی صفحات وب و ایجاد تجربه کاربری بهتر فراهم میکند. انتخاب بین رنگ، تصویر، گرادیان یا ویدیو بستگی به هدف طراحی، مخاطب و کارایی صفحه دارد.
اطلاعاتت رو بده وقت مشاوره رزرو کن
