آموزش HTML - پس‌زمینه

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

پس‌زمینه بخش مهمی از طراحی وب است که ظاهر کلی صفحه وب و همچنین تجربه کاربری را بهبود می‌بخشد. HTML سمبل‌ها، ویژگی‌ها و خواص متعددی را برای مدیریت پس‌زمینه عناصر درون یک سند ارائه می‌دهد.

به طور پیش‌فرض، پس‌زمینه صفحه وب ما سفید رنگ است. ممکن است آن را دوست نداشته باشیم، اما نگران نباشید. HTML دو روش خوب زیر را برای تزیین پس‌زمینه صفحه وب ما ارائه می‌دهد:

• پس‌زمینه HTML با رنگ‌ها
• پس‌زمینه HTML با تصاویر

سنتکس (Syntax)

در ادامه سنتکس‌های پس‌زمینه در HTML آمده است:

<body background = value>

<body style="background-color: value;">

مقدار (value) می‌تواند نام انگلیسی یک رنگ، مقدار RGB رنگ یا مقدار شانزده‌شانزدهی (Hexadecimal) یک رنگ باشد.

مثال‌های پس‌زمینه در HTML

در ادامه کد نمونه‌هایی آورده شده است که نحوه تنظیم استایل‌های مختلف پس‌زمینه را برای یک سند HTML نشان می‌دهد.

• تنظیم رنگ برای پس‌زمینه
• تنظیم تصویر به عنوان پس‌زمینه
• تکرار و موقعیت پس‌زمینه
• تنظیم پس‌زمینه‌های دارای الگو (Pattern)

تنظیم رنگ برای پس‌زمینه

یک روش ابتدایی برای تغییر پس‌زمینه، تغییر رنگ آن است. خاصیت background-color مشخص کردن رنگ را برای پس‌زمینه یک عنصر آسان می‌کند. این کار را می‌توان با گنجاندن ویژگی استایل زیر در تگ بازکننده یک عنصر HTML انجام داد.

مثال

در ادامه مثالی از تنظیم رنگ پس‌زمینه برای یک DIV آمده است:

<!DOCTYPE html>
<html lang="en">

<head>
   <title>Styled Div Example</title>
</head>

<body>
   <div style="background-color: #3498db; ">
      <h1>Welcome to My Website</h1>
      <p>
         This is an example of a styled div with a 
         background color and text color.
      </p>
      <!-- Additional content goes here -->
   </div>
</body>

</html>

تنظیم تصویر به عنوان پس‌زمینه

HTML به ما امکان می‌دهد یک تصویر را به عنوان پس‌زمینه صفحه وب HTML یا جدول خود مشخص کنیم. از خاصیت‌های background و background-image می‌توان برای کنترل تصویر پس‌زمینه یک عنصر HTML، به ویژه پس‌زمینه بدنه صفحه و جدول استفاده کرد. ما فقط کافی است مسیر یک تصویر را به عنوان مقدار به هر دو خاصیت ارسال کنیم، همانطور که در مثال بعدی نشان داده شده است. در مثال زیر، خاصیت background-image به بدنه (body) صفحه وب اختصاص یافته است.

مثال

در ادامه مثالی از تنظیم تصویر به عنوان رنگ پس‌زمینه آورده شده است؛ در اینجا ما تصویری را برای پس‌زمینه صفحه وب با تگ <body> تنظیم می‌کنیم:

<!DOCTYPE html>
<html lang="en">

<head>
      <title>Background Image Example</title>
</head>

<body background="/market/public/assets/newDesign/img/logo.svg">
   <div style="background-color: rgba(255, 255, 255, 0.8); padding: 20px;">
      <h1>Welcome to My Website</h1>
      <p>
         This is an example of setting a background 
         image using HTML attributes.
      </p>
   </div>
</body>

</html>

تکرار و موقعیت پس‌زمینه

اگرچه می‌توانید فقط با استفاده از HTML یک تصویر را به عنوان پس‌زمینه تنظیم کنید، اما برای کنترل رفتار آن، مانند تکرار و موقعیت‌دهی، باید از CSS استفاده کنیم. پیشنهاد می‌کنیم برای درک بهتر، CSS background-image ما را تماشا کنید. CSS گزینه‌هایی را برای کنترل نحوه تکرار تصاویر پس‌زمینه و موقعیت قرارگیری آن‌ها ارائه می‌دهد. خاصیت background-repeat مشخص می‌کند که آیا تصویر باید به صورت افقی، عمودی، هر دو یا هیچ‌کدام تکرار شود. علاوه بر این، خاصیت background-position به توسعه‌دهندگان این امکان را می‌دهد تا تعیین کنند تصویر پس‌زمینه در کجای عنصر قرار گیرد.

مثال

برنامه HTML زیر صفحه‌ای ایجاد می‌کند که دارای یک div محتوای وسط‌چین‌شده با الگوی پس‌زمینه عمودی تکرارشونده از تصویر مشخص‌شده است. رنگ پس‌زمینه کانتینر به طور پیش‌فرض روی سفید تنظیم شده و متن داخل کانتینر با رنگ مشکی استایل‌دهی شده است که طراحی بصری جذاب و هماهنگی ایجاد می‌کند.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Background Repeat</title>
   <style>
      body {
         background-image: 
            url('/market/public/assets/newDesign/img/logo.svg');
         background-repeat: repeat-y;
         background-position: center;
         justify-content: center;
         align-items: center;
         display: flex;
      }
      div{
         background-color: rgba(255, 255, 255, 0.6); 
         padding: 20px;
      }
   </style>
</head>

<body>
   <div>
      <h1>Welcome to My Website</h1>
      <p>
         This is an example of setting a background 
         image using HTML attributes.
      </p>
   </div>
</body>

</html>

تنظیم پس‌زمینه‌های دارای الگو (Pattern)

احتمالاً الگوهای متعددی یا پس‌زمینه‌های شفاف را در وب‌سایت‌های مختلف دیده‌اید. این کار را به سادگی می‌توان با استفاده از یک تصویر الگودار یا تصویر شفاف در پس‌زمینه انجام داد. پیشنهاد می‌شود هنگام ایجاد الگوها یا تصاویر GIF یا PNG شفاف، از کوچک‌ترین ابعاد ممکن، حتی به کوچکی 1x1 استفاده کنید تا از کندی بارگذاری جلوگیری شود.

مثال

در اینجا مثالی از نحوه تنظیم الگوی پس‌زمینه یک جدول آورده شده است.

<!DOCTYPE html>
<html>

<head>
   <title>HTML Background Images</title>
</head>

<body>

<!-- Set a table background using pattern -->
<table background = "/images/pattern1.gif" 
         width = "100%" 
         height = "100">
   <tr>
      <td>
         This background is filled up with a pattern image.
      </td>
   </tr>
</table>

<!-- Another example on table background using pattern -->
<table background = "/images/pattern2.gif" 
         width = "100%" 
         height = "100">
   <tr>
      <td>
         This background is filled up with a pattern image.
      </td>
   </tr>
</table>

</body>
   
</html>