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

فایل HTML خود را با استفاده از Notepad یا هر ویرایشگر متن دیگری که به آن عادت دارید باز کنید. به عنوان مثال، بیایید یک صفحه وب سایت ابتدایی با حداقل متن را در نظر بگیریم. شما می توانید فایل خود را با استفاده از هر مرورگری باز کنید.

ابتدا رنگ پس‌زمینه‌تان را تغییر دهید، زیرا افرادی که اینترنت کندی دارند نمی‌توانند بلافاصله تصویر پس‌زمینه سایت را ببینند. برای مدتی در حالی که تصویر در حال بارگذاری است، آنها فقط می توانند رنگ سایت شما را ببینند.
در تگ وارد کنید پارامتر bgcolor=”*****” که در آن ***** کد رنگ است. با انتخاب گزینه "برای وب" یا در وب سایت https://colorscheme.ru/color-names می توانید رنگ های HTML را در هر ویرایشگر گرافیکی پیدا کنید.

شما فقط باید یک رنگ را در پالت دایره انتخاب کنید و شدت آن را در مربع تعیین کنید. در سمت راست دو کد برای html خواهید دید. آنها را کپی کرده و در دفترچه یادداشت قرار دهید.

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

اکنون می توانید شروع به درج تصویر پس زمینه خود کنید. برای راحتی بیشتر تصویر مورد نظر را در پوشه کد قرار دهید. نامی با حروف لاتین به او بدهید.

اکنون با کلیک راست بر روی آن، انتخاب "Open with" و کلیک بر روی هر مرورگر نصب شده در رایانه خود، مکان فایل را پیدا کنید.

آدرس را از نوار جستجوی مرورگر خود کپی کنید.

اکنون در تگ خط را وارد کنید:

• style="background-image: url('file:///C:/Users/FILE_PATH.jpg')"

فایل خود را ذخیره کنید.

صفحه وب خود را بررسی کنید خواهید دید که پس زمینه جایگزین متن شما شده است.

لطفاً توجه داشته باشید که برای کاربرانی که وضوح صفحه نمایش بالاتری دارند، تصویر شما از پایین و به راست کپی می شود. اگر تصویر تک رنگ نباشد خوب به نظر نمی رسد. دستورات خاصی برای اصلاح این پارامتر وجود دارد.

• Background-repeat: "Value." گزینه‌های مقدار شما می‌تواند این باشد: "repeat-x" - تصویر پس‌زمینه شما را هم به صورت افقی و هم به صورت عمودی تکرار می‌کند. "repeat-y" - تکرار فقط به صورت عمودی. "بدون تکرار" - تصویر در جای خود ثابت است و تکرار نمی شود. "فضا" - کل صفحه با حداکثر تعداد کپی از تصویر پر می شود، بیرونی ترین آنها برش داده می شود. "گرد" - همان گزینه، اما لبه های تصویر به دقت کوچک می شوند.
• پس‌زمینه پیوست: «ارزش». اگر به جای کلمه Value تگ "scroll" را جایگزین کنید، تصویر همراه با سایت حرکت می کند. "ثابت" - پس زمینه هنگام پیمایش بدون تغییر باقی می ماند.
• پس زمینه اندازه: Value Value2. در اینجا مقادیر باید مقداری بر حسب پیکسل بگیرند. به عنوان مثال: 100px 200px. علاوه بر پیکسل ها، مقادیر درصد نیز پذیرفته می شود. این گزینه ای برای پر کردن صفحه با یک تصویر است. علاوه بر اعداد، می توانید دو پارامتر را وارد کنید: "contain" - صفحه را با یک تصویر در امتداد سمت طولانی پر می کند و "cover" - صفحه را با یک تصویر در امتداد عرض پر می کند.

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

ولاد مرژویچ

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

پس زمینه در یک صفحه وب

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

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

افزودن کاغذ دیواری

افزودن یک تصویر با تنظیم آدرس تصویر با استفاده از کلمه کلیدی url انجام می شود. برای کنترل تکرار یک تصویر، از آرگومان های no-repeat، repeat-x (تکرار افقی) و repeat-y (تکرار عمودی) استفاده می شود. به لطف این، می توانید صفحه وب نشان داده شده در شکل را دریافت کنید. 1.

برای تنظیم یک تصویر در یک صفحه وب، باید یک ویژگی سبک پس زمینه را به انتخابگر BODY اضافه کنید، همانطور که در مثال 1 نشان داده شده است.

مثال 1: تصویر پس زمینه

در این مثال، target.gif گرافیکی به عنوان پس‌زمینه صفحه وب بدون تکرار تصویر تعریف شده است. برای جلوگیری از اتصال محکم تصویر به لبه های مرورگر، 30 پیکسل به سمت راست و 20 پیکسل به پایین از موقعیت اصلی خود جابجا می شود.

تکرار یک الگو

با توجه به اینکه می توانید الگوی پس زمینه را به صورت افقی یا عمودی تکرار کنید، گزینه های مختلفی برای طراحی صفحات وب در دسترس است. به عنوان مثال، برای ایجاد یک نوار عمودی در امتداد لبه سمت چپ (شکل 2)، به تصویر نشان داده شده در شکل نیاز دارید. 3.

طرح باید به گونه ای باشد که به صورت عمودی و بدون درزهای قابل توجه با هم هماهنگ شود و همچنین یک کل واحد را با رنگ پس زمینه مشخص شده صفحه وب تشکیل دهد. مثال 2 نحوه ایجاد چنین تصویر پس زمینه ای را با استفاده از ویژگی پس زمینه و مقدار تکرار y آن نشان می دهد.

مثال 2. تکرار پس زمینه به صورت عمودی

به همین ترتیب، می توانید پس زمینه را به صورت افقی تکرار کنید، برای مثال، با ایجاد یک گرادیان و تنظیم آن به عنوان تصویر پس زمینه (شکل 4).

برای دریافت صفحه وب نشان داده شده در شکل. 4، ابتدا باید یک عکس با یک انتقال گرادیان بسازید. عرض برای تعیین 20-40 پیکسل کافی است و ارتفاع تصویر به هدف سند و ارتفاع مورد انتظار محتوای صفحه وب بستگی دارد. همچنین فراموش نکنید که یک نقاشی بزرگ حجم فایل گرافیکی را افزایش می دهد. و این بر سرعت بارگذاری آن تأثیر منفی می گذارد و در نهایت منجر به کندتر نمایش پس زمینه می شود. برای این مورد، یک تصویر 30x200 پیکسل کاملا مناسب بود (شکل 5).

مثال 3 کد HTML را برای ایجاد پس زمینه گرادیان نشان می دهد.

مثال 3: تکرار پس زمینه افقی

یک طرح گرادیانت به خوبی با یک بلوک رنگ ثابت هماهنگ می شود، بنابراین در این مثال یک لایه برای نمایش محتوای صفحه وب اضافه می کنیم.

افزودن عکس به متن

با استفاده از یک تصویر پس‌زمینه، می‌توانید فرآیند افزودن گرافیک به متن خاص، مانند سرفصل‌ها را خودکار کنید. برای این کار از ویژگی background universal استفاده کنید که بر روی انتخابگر مورد نظر اعمال می شود. مقدار مسیر رسیدن به تصویر و برای اینکه تکرار نشود، آرگومان عدم تکرار است (مثال 4).

مثال 4: افزودن تصویر

سرفصل

متن اصلی

همانطور که در این مثال نشان داده شده است، نقشه را می توان به صورت افقی و عمودی از موقعیت اصلی خود حرکت داد، به طور پیش فرض این گوشه سمت چپ بالای عنصر بلوک است. تغییر پس‌زمینه به شما این امکان را می‌دهد که تصویر را در ارتباط با متن به روش دلخواه قرار دهید. برای جلوگیری از همپوشانی متن روی تصویر، باید ویژگی padding-left را اضافه کنید که به دلیل آن متن با فاصله مشخص شده به سمت راست منتقل می شود. در هر مورد فردی است و معمولاً برابر با عرض تصویر به اضافه فضای مورد نظر بین تصویر و متن است.

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

برای تنظیم پس زمینه در HTML از DOCTYPE میانی استفاده کنید

و من با این واقعیت شروع می کنم که در HTML5تنظیم آن ممکن نیست. تصمیم گرفته شد که این ویژگی به CSS اضافه شود. بنابراین، اگر قصد دارید از موارد زیر استفاده کنید و می خواهید کد معتبر (صحیح) دریافت کنید، باید نوع سند انتقالی را انتخاب کنید. برای انجام این کار، صفحه وب شما باید با خط زیر شروع شود:

انتقالی//EN" "http://www.w3.org/TR/html4/loose.dtd">

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

پس زمینه یک سند HTML و عناصر آن

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

عناصر صفحهداخل تگ BODY هستند. قابل ذکر است که امکان تنظیم رنگ و/یا تصویر پس زمینه با استفاده از HTML برای همه عناصر سند وجود ندارد. به عنوان مثال، یک تصویر پس زمینه فقط برای جداول قابل تعیین است. به طور پیش فرض، آنها معمولا یک پس زمینه شفاف دارند.

ویژگی bgcolor برای ایجاد رنگ پس زمینه

برای پرسیدن رنگ پس زمینهسند یا عناصر آن از ویژگی bgcolor استفاده می کنند، به عنوان مثال:

در این حالت، رنگ پس‌زمینه را برای کل صفحه تنظیم می‌کنیم. و در اینجا مثالی از نحوه تنظیم رنگ پس زمینه برای یک جدول در تگ TABLE آورده شده است:

متن با پس زمینه

قابل ذکر است که رنگ پس زمینه در جدول را می توان برای هر دو ردیف در تگ TR و برای سلول های آنها در تگ TD مشخص کرد.

چگونه کد رنگ را بفهمیم؟

احتمالاً قبلاً متوجه شده اید که رنگ در HTML روی یک خاص تنظیم شده است کدبه عنوان مثال: #ec008c. برای اینکه کد رنگ مورد نیاز خود را پیدا کنید، می توانید از یکی از ویرایشگرهای گرافیکی استفاده کنید. به عنوان مثال، در فتوشاپ می توانید از " ابزار قطره چشم» (پیپت) برای به دست آوردن رنگ از نقطه ای در تصویر. سپس، باید روی رنگ به دست آمده در نوار ابزار و در پنجره ای که باز می شود کلیک کنید. انتخاب کننده رنگ» (انتخاب رنگ) کد رنگ را کپی کنید.

لطفاً توجه داشته باشید که این کد در ابتدا علامت پوند (#) نخواهد داشت، این علامت باید به صورت دستی اضافه شود.

همچنین می توانید از خدمات آنلاین متعددی استفاده کنید، به عنوان مثال:

• و غیره.

اصل کار آنها حتی ساده تر است - روی رنگ مورد نظر کلیک کنید و کد آن را دریافت کنید.

ویژگی پس زمینه برای ایجاد یک تصویر پس زمینه

همانطور که در مورد رنگ پس زمینه، و در مورد تصویر پس زمینهشما باید از یک ویژگی خاص استفاده کنید، به عنوان مثال:

در این مورد، ما یک تصویر پس زمینه برای صفحه به عنوان یک کل تنظیم می کنیم. قابل ذکر است که به دلیل محدودیت در اندازه تصویر تکرار می شود مثلا:

همانطور که می بینید، هنگام تکرار، انتقال بین تصاویر قابل توجه است. بنابراین اغلب از تصاویر ویژه ای استفاده می شود که این نکته در نظر گرفته شود.

و در اینجا مثالی از نحوه تنظیم یک تصویر پس زمینه برای یک جدول در تگ TABLE آورده شده است:

متن با پس زمینه

قابل توجه است که تصویر پس زمینه را می توان فقط برای جدول به عنوان یک کل و/یا سلول جداگانه آن تنظیم کرد. این برای یک رشته کار نمی کند.

مسیر مطلق و نسبی به تصویر پس زمینه

ارزش توجه ویژه را دارد آدرس تصویر پس زمینه. در این مورد، یک مسیر نسبی به تصویر استفاده می شود، i.e. آدرس نسبت به محل فایل تصویری برای فایل صفحه وب مشخص می شود. این گزینه را نمی توان به ویژه موفق نامید. بهتر است از یک مسیر مطلق برای تصویر استفاده کنید، i.e. آدرس کامل آن، مثلا:

در این صورت هیچ مشکل مرتبطی نخواهید داشت. می توانید در این مورد بیشتر بخوانید.

بیایید آن را جمع بندی کنیم

استفاده از ویژگی های bgcolor و پس زمینه منسوخ شده است، بنابراین برای اعتبار کد HTML باید از DOCTYPE انتقالی استفاده کنید. برای تنظیم رنگ پس‌زمینه در HTML از کدهای خاصی استفاده می‌کند که می‌توانید در ویرایشگر گرافیکی یا با استفاده از سرویس‌های آنلاین ویژه آن را پیدا کنید. تصویر پس زمینه در ناحیه اختصاص داده شده به آن کپی شده و در بالای رنگ پس زمینه قرار دارد. برای تعیین تصویر پس زمینه بهتر است از URL کامل آن استفاده کنید. این تمام چیزی است که من دارم. با تشکر از توجه شما. موفق باشید!

ساعت 22:37

ویرایش پیام

روز خوبی برای همه کسانی که می خواهند چیز جدیدی یاد بگیرند و یاد بگیرند! آیا تا به حال به ظاهر توجه کرده اید که در طول توسعه آن سازندگان برای طراحی پس زمینه صفحات تنبل بودند؟ و من انجام دادم. بد به نظر می رسد. اغلب، به دلیل فقدان تقسیم‌بندی‌های معمول بین انواع مختلف اطلاعات، با هم مخلوط می‌شوند و به سادگی تمایلی به بررسی بیشتر چیزی در چنین منبع وب وجود ندارد.

برای جلوگیری از وقوع چنین فاجعه ای برای من، تصمیم گرفتم مقاله ای با این موضوع بنویسم: "چگونه یک پس زمینه صفحه در html ایجاد کنیم." پس از خواندن نشریه، خواهید آموخت که از چه ابزارهایی می توانید برای تنظیم طراحی پس زمینه استفاده کنید، چگونه پس زمینه را ثابت یا تغییر دهید، و بسیاری موارد دیگر که به جذابیت سایت شما کمک می کند. حالا بیایید شروع کنیم!

ابزارهای اساسی برای تنظیم پس زمینه صفحات وب

برای تنظیم یک تصویر پس زمینه، توسعه دهندگان زبان وب ویژگی پس زمینه را ارائه کردند. هم در و هم در css موجود است.

در زبان نشانه گذاری، این ویژگی تگ بدنه است و در شیوه نامه ها، یک ویژگی جهانی است که به شما امکان می دهد تا 5 ویژگی پس زمینه را همزمان تنظیم کنید. پس‌زمینه یک عنصر نسبتاً انعطاف‌پذیر است که می‌توان از آن برای تنظیم پس‌زمینه به صورت تک رنگ، یک تصویر رنگی یا حتی یک انیمیشن استفاده کرد.

بنابراین، برای تنظیم تصویر پس زمینه از طریق واحد html فقط کد زیر را بنویسید: ... و به جای عبارت “آدرس فایل” مسیر تصویر را درج کنید.

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

مثلا، ...، ما یک پس زمینه سیاه برای سایت خود قرار داده ایم.

رنگ ها در css و html یا با یک کلمه انگلیسی (مثلا قرمز) یا یک کد خاص که از علامت # و شش کاراکتر بعد از آن تشکیل شده است (مثلا #FFDAB9) مشخص می شوند.

وقتی گزینه دوم را در نرم افزارهای تخصصی توسعه دهندگان تایپ می کنید، پالت به طور خودکار در مقابل شما ظاهر می شود. اگر تازه شروع به یادگیری این زبان های وب کرده اید، می توانید کد رنگ را در اینترنت جستجو کنید.

پس زمینه به عنوان یک ویژگی در شیوه نامه های آبشاری

یا در یک فایل جداگانه با سبک های css یا در یک عنصر تنظیم شده است

در این یادداشت می توانیم کار خود را خلاصه کنیم. به جمع مشترکین وفادار من بپیوندید، اگر چیزی نامشخص است سؤال بپرسید و با پیوند به وبلاگ من حرص نخورید، بلکه آن را با دوستان خود به اشتراک بگذارید. برای شما یک تجربه یادگیری لذت بخش آرزو می کنم. خداحافظ!

با احترام، رومن چوشوف

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

پس زمینه برای یک وب سایت یا یک بلوک جداگانه

از آنجایی که برای رسیدن به این هدف به یک فایل css نیاز داریم، باید آن را ایجاد کرده و به html متصل کنیم. در این مورد نوشته شده است. پس از این می توانید شروع به کار کنید. ابتدا باید تصمیم بگیرید که پس زمینه را روی چه چیزی تنظیم کنید. اگر کل صفحه به عنوان یک کل است، می توانید این کار را به صورت زیر انجام دهید:

بدنه (رنگ پس زمینه: سفید؛ )

یعنی به تگ body دسترسی پیدا می کنیم که کل صفحه ما را نشان می دهد. برای تنظیم رنگ پس زمینه، از ویژگی background-color استفاده کنید. اما اگر بخواهید پس زمینه را به جای یک رنگ ثابت روی یک الگو قرار دهید چه؟ سپس باید آن را به این صورت بنویسید:

بدنه (پس‌زمینه-تصویر: آدرس اینترنتی (مسیر به تصویر. پسوند تصویر))

برای وضوح، پیشنهاد می کنم با استفاده از یک مثال به همه چیز با جزئیات بیشتری نگاه کنید. برای این کار از این تصویر استفاده خواهم کرد:

به عنوان مثال، background-image: url(comp.png) . در این مثال، ما یک تصویر پس زمینه به نام comp (این همان چیزی است که من آن را نامیده ام) با فرمت png تنظیم می کنیم که در همان پوشه فایل css قرار دارد.
در html یک بلوک سفارشی با ابعاد خاص برای نشان دادن عملکرد خصوصیات CSS ایجاد خواهم کرد.

و در اینجا سبک هایی برای آن وجود دارد:

#ct(پس‌زمینه-تصویر: url(comp.png)؛ عرض: 600 پیکسل؛ ارتفاع: 400 پیکسل؛ )

این چیزی است که ما به دست آوردیم:

چرا اینطور است؟ واقعیت این است که به طور پیش فرض مرورگر تصویر را چندین بار تکرار می کند تا بلوک را به طور کامل پر کند. گاهی اوقات این لازم است، به عنوان مثال، هنگام استفاده از الگوهای بدون درز، اما در مورد ما باید یک تصویر وجود داشته باشد. خوشبختانه، این را می توان به راحتی مدیریت کرد.

تکرار پس زمینه

اگر تصویری به عنوان پس‌زمینه دارید، به طور پیش‌فرض به صورت افقی و عمودی تکرار می‌شود تا کل فضای صفحه را پر کند. برای حذف این مورد، از ویژگی background-repeat و مقدار no-repeat آن استفاده کنید. مقادیر زیر نیز وجود دارد:

• Repeat-x - فقط به صورت افقی تکرار کنید
• Repeat-y - فقط عمودی

بیایید به ویژگی های پس زمینه گرافیکی خود اضافه کنیم:

Background-repeat: no-repeat;

موقعیت

ویژگی background-position مکان قرار گرفتن تصویر را تعیین می کند. دو مقدار در اینجا مشخص شده است - افقی و عمودی. مثال‌ها: موقعیت پس‌زمینه: پایین سمت راست - موقعیت در گوشه پایین سمت راست، بالا-چپ - در گوشه بالا پایین (و به طور پیش‌فرض)، 250 پیکسل 500 پیکسل - از گوشه سمت چپ بالا به سمت راست با 250 پیکسل و پایین 500.

بیایید نگاهی بهتر به مثال ها بیندازیم:

موقعیت پس زمینه: بالا سمت راست.

تصویر به لبه سمت راست بالا منتقل می شود. به بلوک هم پس زمینه زرد دادم تا لبه هایش دیده شود.

پس زمینه موقعیت: 50% 50%;

تصویر دقیقاً در مرکز بلوک خود ظاهر شد. بله، بله، این نیز به لطف درصد ثبت موقعیت امکان پذیر است.

پس زمینه موقعیت: 70% 20%;

پس‌زمینه 70 درصد افقی و 20 درصد عمودی جابه‌جا می‌شود.

همچنین مجاز به تعیین مقدار موقعیت منفی در پیکسل است. این کار را می توان انجام داد، برای مثال، زمانی که از یک تصویر اسپرایت بزرگ استفاده می کنید و باید قسمت مورد نیاز این اسپرایت را در یک بلوک قرار دهید.

پس زمینه را قفل کنید

من همچنین یک ویژگی به نام Background-attachment را دوست دارم. این فقط دو مقدار دارد و اولین مقدار پیش فرض است (پیمایش). این بدان معناست که با اسکرول صفحه، پس‌زمینه نیز اسکرول می‌شود و اگر از تصویری بدون تکرار استفاده کنید، در نهایت به پایان می‌رسد و فقط یک رنگ ثابت می‌شود.

برای جلوگیری از این اتفاق، background-attachment: fixed مشخص شده است و اکنون پس‌زمینه ما به‌طور ایمن در جای خود ثابت شده است. این را می توان با نحوه تعریف یک موقعیت ثابت برای یک بلوک به طوری که هنگام اسکرول از صفحه ناپدید نشود مقایسه کرد.

نسخه کوتاه شده این همه خوبی

ما ویژگی‌های زیادی را مورد بحث قرار داده‌ایم که به شما امکان می‌دهد پس‌زمینه ایجاد کنید، اما اگر از همه آنها استفاده کنید، در نهایت با یک ضبط دست و پا گیر مواجه می‌شوید. یک راه حل بسیار زیبا وجود دارد. ویژگی پس زمینه به شما امکان می دهد تنظیمات لازم را که با یک فاصله از هم جدا شده اند به ترتیب زیر بنویسید:
زمینه: موقعیت پین تکرار تصویر رنگی.
و اکنون همه چیز را می توان اینگونه نوشت:

پس زمینه: url زرد (comp.png) بدون تکرار 20% 100px.

اگر برخی از ویژگی ها نیازی به تعریف نداشته باشند، به سادگی حذف می شوند (در مورد ما، ما پس زمینه-پیوست ننوشتیم).

پس زمینه های زیادی

اگر به چندین تصویر پس زمینه نیاز دارید چه می کنید؟ این اتفاق می افتد، چه کاری می توانید انجام دهید؟ امروزه CSS از این ویژگی پشتیبانی می کند. بیایید آن را هم امتحان کنیم. بیایید این نماد را برداریم

اسمش را گذاشتم لپ تاپ

و در اینجا کدی برای قرار دادن چند تلفن وجود دارد:

پس زمینه: url(comp.png) بدون تکرار 20% 100px، url(laptop.png) بدون تکرار 50% 50%؛ رنگ پس زمینه: زرد;

همانطور که می بینید، فقط باید بعد از تصویر اول یک کاما قرار دهید و تنظیمات تصویر دوم را وارد کنید. در این صورت بهتر است یک رنگ ثابت را جداگانه ست کنید.

به همین ترتیب، می توانید هر تعداد عکس بیشتری را که دوست دارید ضبط کنید، اما زیاده روی نکنید - گرافیک زیاد خیلی خوب نیست.

اینجاست که می خواهم این مقاله را به پایان برسانم. شما می توانید بسیاری از کارهای جالب دیگر را با پس زمینه انجام دهید، من سعی خواهم کرد در آینده در مورد آنها بنویسم (و قبلاً چیزی نوشته ام - به عنوان مثال).