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

تصویر به عنوان پس زمینه صفحه - HTML

اجازه دهید ابتدا روش تعیین را در نظر بگیریم تصویر پس زمینهدر سایت با استفاده از ویژگی زمینهبرچسب زدن بدن:

در اینجا تصویر پس زمینه با استفاده از ویژگی پس زمینه تگ body تنظیم می شود.

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

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

تصویر به عنوان پس زمینه صفحه - CSS

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

در اینجا تصویر پس زمینه با استفاده از ویژگی پس زمینه CSS تنظیم می شود.

در اینجا با استفاده از ملک پس زمینه-پیوستپس زمینه صفحه ثابت است و با استفاده از ویژگی پس زمینه-تکرارتکرار افقی تصویر تنظیم شده است. اما شایان ذکر است که تصویر پس زمینه باید به خوبی در اطراف لبه ها "دوخته" شود.

اگر می خواهید تصویر پس زمینه را به اندازه کامل پنجره مرورگر بکشید، از ویژگی استفاده کنید پس زمینه اندازه: 100%;

در سایت ساز Nubex می توانید از یک تصویر بزرگ به عنوان پس زمینه برای هر وب سایتی استفاده کرده و آن را پین کنید.

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

مثال
دانلود منابع

نمونه هایی از استفاده از تصاویر پس زمینه واکنش گرا

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

مجموعه قایقرانی

تله پاتی دیجیتال

رستوران ماریان

اگر می‌خواهید در پروژه‌تان به «ظاهر» مشابهی دست پیدا کنید، در مسیر درستی هستید.

مفاهیم اساسی

در اینجا برنامه بازی ما است.

از ویژگی background-size برای پوشاندن کل نما استفاده کنید

ویژگی CSS background-size را می توان روی پوشش تنظیم کرد. مقدار پوشش به مرورگر دستور می‌دهد که به طور خودکار و متناسب تصویر پس‌زمینه را از نظر طول و عرض مقیاس کند تا برابر یا بزرگ‌تر از عرض/ارتفاع درگاه دید باقی بماند.

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

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

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

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

گذاشتن فضای زیادی برای بارگذاری یک تصویر پس زمینه در هر صورت ایده خوبی نیست و در مورد دستگاه های تلفن همراه ایده بسیار بدی است. علاوه بر این، چنین وضوحی در صفحه نمایش های با وضوح پایین به سادگی غیر ضروری است ( بعداً در این مورد بیشتر به شما خواهم گفت).

بنابراین. بیا شروع کنیم.

HTML

در زیر هر آنچه از نشانه گذاری نیاز دارید آمده است:

... محتوای صفحه شما ...

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

با این حال، این تکنیک روی هر عنصر بلوکی (مانند div یا فرم) کار می کند. در صورتی که عرض-ارتفاع ظرف بلوک شما متحرک باشد، اندازه تصویر پس زمینه نیز تغییر می کند تا کل ناحیه ظرف را پر کند.

CSS

ما خواص عنصر بدنه را به صورت زیر اعلام می کنیم:

body ( /* محل تصویر پس‌زمینه */ تصویر پس‌زمینه: url(images/background-photo.jpg)؛ /* تصویر پس‌زمینه به‌صورت افقی و عمودی در مرکز قرار می‌گیرد */ موقعیت پس‌زمینه: مرکز مرکز؛ /* پس‌زمینه تکرار نمی‌شود */background-repeat: no-repeat; /* پس زمینه در viewport ثابت است و بنابراین زمانی که ارتفاع محتوا از ارتفاع تصویر بیشتر شود، پس زمینه حرکت نمی کند */background-attachment: fixed؛ /* این ویژگی باعث می شود پس‌زمینه برای تغییر مقیاس زمانی که اندازه ظرف حاوی تغییر می‌کند */ اندازه پس‌زمینه: پوشش؛ /* رنگ پس‌زمینه که هنگام بارگیری تصویر پس‌زمینه نمایش داده می‌شود */ رنگ پس‌زمینه: #464646؛ )

مهمترین ویژگی ارزش در این لیست عبارت است از:

پس زمینه اندازه: پوشش;

ارزش توجه به آن را دارد. اینجاست که معجزه اتفاق می افتد. این جفت ارزش-ویژگی به مرورگر دستور می‌دهد تا تصویر پس‌زمینه را با نسبت‌هایی مقیاس‌بندی کند که ارتفاع-عرض برابر یا بیشتر از ارتفاع-عرض خود عنصر باقی بماند. ( در مورد ما این عنصر- بدن.)

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

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

هنگامی که یک تصویر به اندازه اصلی خود کوچک می شود، کیفیت تصویر کاهش می یابد.

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

برای اطمینان از تراز وسط بودن پس زمینه، موارد زیر را اعلام کردیم:

پس زمینه موقعیت: مرکز مرکز.

با این کار، محورهای مقیاس بندی در مرکز دید قرار می گیرند.

این چیزی است که ما انجام خواهیم داد. بیایید ویژگی background-attachment را روی ثابت تنظیم کنیم تا مطمئن شویم که تصویر در جای خود باقی می ماند حتی اگر صفحه را به پایین اسکرول کنیم:

پس زمینه-پیوست: ثابت.

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

تنها کاری که باید انجام دهید این است که نسخه ی نمایشی را دانلود کنید و کمی با ویژگی های موقعیت یابی (پس زمینه-ضمیمه و موقعیت-پس زمینه) آزمایش کنید تا ببینید چگونه بر رفتار پیمایش صفحه و پس زمینه تأثیر می گذارد.

مقادیر دارایی زیر خود توضیحی هستند.

خلاصه CSS

در بالا، برای وضوح، خصوصیات CSS را به طور کامل تعریف کردم.

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

بدنه ( پس‌زمینه: آدرس اینترنتی (background-photo.jpg) وسط پوشش بدون تکرار ثابت شد؛ )

تنها کاری که باید انجام دهید این است که مقدار url را به مسیر تصویر خود تغییر دهید.

اختیاری: درخواست رسانه برای دریافت نسخه کوچکتر از تصویر پس زمینه

برای صفحه‌های با وضوح پایین‌تر، به فتوشاپ نیاز داریم تا رزولوشن تصویر را به نسبت 768 در 505 پیکسل کاهش دهد. من آن را از طریق Smush.it نیز اجرا کردم تا حجم فایل کاهش یابد. این باعث شد که اندازه از 1741 به 114 کیلوبایت کاهش یابد. این باعث کاهش 93 درصدی حجم فایل شد.

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

و در اینجا خود پرسش رسانه ای است:

بخش کلیدی درخواست رسانه، ویژگی max-width: 767px است، که در مورد ما به این معنی است که اگر نمای مرورگر بزرگتر از 767 پیکسل باشد، از یک تصویر بزرگ استفاده می شود.

نقطه ضعف این روش این است که اگر اندازه پنجره مرورگر را از مثلاً 1200 پیکسل به 640 پیکسل (یا بالعکس) تغییر دهید، در حالی که تصویر کوچکتر یا بزرگتر بارگذاری می شود، یک صفحه سوسو می بینید.

و علاوه بر آن با توجه به اینکه برخی دستگاه های تلفن همراهمی تواند با وضوح بالاتر کار کند - به عنوان مثال، یک آیفون 5 با صفحه نمایش رتینا با وضوح 1136 در 640 پیکسل، یک تصویر کوچکتر زشت به نظر می رسد.

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

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

برای تکمیل کار، می توانید از یکی از 4 روش استفاده کنید:

• 1. زمینه با یک رنگ
• 2. پس زمینه با بافت
• 3. پس زمینه با استفاده از گرادیان
• 4. پس زمینه از یک تصویر بزرگ

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

برای ایجاد یا تغییر پس زمینه سایت که از یک رنگ تشکیل شده است، باید به فایل مورد نظر بروید style.css، که در آن مقدار - بدنه را پیدا کنید (مسئول بدنه اصلی سایت است). اکنون باید تابع پس زمینه رنگ را در صورتی که وجود نداشت ثبت کنید و کد رنگ را مشخص کنید. در مواردی که نیاز به ایجاد یک پس زمینه سفید برای یک وب سایت دارید، باید کد زیر را بنویسید:

پس زمینه رنگ: #83C5E9 ; (پس زمینه آبی، مانند مثال)

شما می توانید یک لیست کامل از رنگ ها را در وب سایت پیدا کنید - (STM). برای تغییر رنگ کافیست مقدار بعد از کولون را تغییر دهید و از تلاش خود لذت ببرید.

ایجاد پس زمینه با استفاده از بافت

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

پس زمینه رنگ: #537759;

background-image: url(images/pattern.png);

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

ساخت پس زمینه با استفاده از گرادیان

هر تصویری که با استفاده از توابع css متصل شده باشد را می توان به صورت افقی و عمودی (در امتداد محورها) تکرار کرد. ایکسو Y). این فرصت به ما این امکان را می دهد که هر پس زمینه ساده ای را برای سایت با دستان خود ایجاد کنیم. برای انجام این کار، باید یک گرادینت با عرض ۱ مگاپیکسل ایجاد کنید (تصویر زیر را ببینید)، آن را به عنوان تصویر ذخیره کنید و در هاست خود آپلود کنید. پس از این، می توانید کد لازم را بنویسید، یعنی:

پس زمینه رنگ: #83C5E9;

پس زمینه-تصویر: url(images/gradient.jpg);

background-repeat: repeat-x;

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

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

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

پس زمینه رنگ: #000000;

پس زمینه-تصویر: url(تصاویر/تصویر عنوان.jpg);

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

background-repeat: no-repeat;

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

تغییر پس زمینه در وب سایت های ucoz

آن روش‌های ایجاد پس‌زمینه برای یک سایت را می‌توان در سیستم‌های مدیریت محتوای مختلف استفاده کرد، اما نه در سایت‌ها - ucoz. برای تغییر پس زمینه وب سایت ucoz باید به کنترل پنل سایت بروید، به "مدیریت طراحی"، و سپس در "ویرایش الگوها".

اکنون باید Style Sheet (CSS) را باز کنید، خط را پیدا کنید "بدن"و پارامتر "زمینه". پس از این، باید لینک را کپی کنید، آن را در مرورگر اینترنت خود قرار دهید و به تصویری که پس زمینه بود دسترسی خواهید داشت.

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

تغییر پس زمینه سایت به HTML

اگر می‌خواهید پس‌زمینه یک سایت html را با استفاده از یک تصویر ایجاد کنید، به سادگی خط کد را وارد کنید:

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

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

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

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

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

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

روش های مختلفی برای تغییر پس زمینه یک وب سایت وجود دارد. برای این کار از قابلیت های CSS یا html استفاده می شود. اما بسیاری از ویژگی‌های کار با پس‌زمینه، در این فناوری‌های وب به همین نام و روش کاربرد دارند.

اصول کار با پس زمینه در html

چندین عنصر را می توان به عنوان پس زمینه استفاده کرد:

• رنگ؛
• تصویر پس زمینه؛
• تصویر بافت.

بیایید استفاده از هر یک از آنها را با جزئیات بیشتری بررسی کنیم.

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

پس زمینه وب سایت #55D52B

علاوه بر کد رنگ هگزا دسیمال، یک مقدار در قالب کلمه کلیدی یا RGB پشتیبانی می شود. مثال ها:

پس زمینه وب سایت rgb (23,113,44)

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

رنگ پس زمینه را با استفاده از کلید واژه هادر مقایسه با دو روش دیگر محدودیت های زیادی دارد.

HTML تنها از 16 کلمه کلیدی برای تنظیم رنگ ها پشتیبانی می کند. در اینجا تعداد کمی از آنها هستند: سفید، قرمز، آبی، سیاه، زردو دیگران.

بنابراین برای تنظیم پس زمینه یک سایت html بهتر است از فرمت هگزادسیمال یا RGB استفاده کنید.

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

حال به قابلیت های زبان فرامتن برای تنظیم تصویر پس زمینه برای سایت می پردازیم. این کار را می توان با استفاده از ویژگی background-image انجام داد.

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

فرض کنید ما در حال توسعه یک وب سایت در مورد شعر هستیم و باید از تصویری از Pegasus به عنوان پس زمینه استفاده کنیم. اسب بالدار آزادی اندیشه خلاق شاعر را به تصویر می کشد!

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

شاید چهار اسب خندان با بال برای شاعران الهام بخش باشد. بنابراین، ما شبیه سازی پگاسوس خود را ممنوع می کنیم. ما این کار را با استفاده از ویژگی background-repeat انجام می دهیم. مقادیر ممکن:

• تکرار-x – تصویر پس زمینه را به صورت افقی تکرار کنید.
• تکرار-y - به صورت عمودی.
• تکرار - در هر دو محور؛
• بدون تکرار - تکرار ممنوع است.

در میان گزینه های ذکر شده، ما به آخرین مورد علاقه مند هستیم. قبل از تغییر پس زمینه سایت، از آن در کد خود استفاده می کنیم:

اما، البته، اگر فلایر ما در وسط صفحه قرار می گرفت، بهتر بود. ویژگی background-position دقیقاً برای قرار دادن تصویر پس زمینه در صفحه در نظر گرفته شده است. شما می توانید مختصات مکان را به چند روش تنظیم کنید:

• کلمه کلیدی ( بالا، پایین، مرکز، چپ، راست);
• درصد - شمارش از گوشه سمت چپ بالا شروع می شود.
• بر حسب واحد اندازه گیری (پیکسل).

بیایید از ساده ترین گزینه وسط استفاده کنیم:

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

• طومار؛


• درست شد.

ما به آخرین مقدار نیاز داریم. حالا کد مثال ما به شکل زیر خواهد بود:

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

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

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

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

ترپاچف D.P. 2012-2020

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

Layout JavaScript PHP NodeJs Vue React Laravel WordPress AJAX Parsing Basic tutorial HTML Reference CSS Reference OOP and MVC tutorial آموزش های ویدئویی آموزش های پایه مرجع آموزش های ویدئویی آموزش های پایه آموزش های پایه آموزش پایه آموزش های پایه آموزش مدیریت پایه آموزش مدیریت برنامه نویس آموزش PHP AJAX+

ویژگی پس زمینه پیوست

ویژگی پس زمینه-پیوستنحوه اسکرول را مشخص می کند تصویر پس زمینهعنصر: همراه با متن یا متن روی تصویر اسلاید می شود.

نحو

انتخابگر (پیوست پس‌زمینه: ثابت | پیمایش | محلی؛ )

ارزش های

مقدار پیش فرض: طومار.

مثال. مقدار پیمایش کنید

در حال حاضر ملک پس زمینه-پیوستتنظیم کنید طومار. عنصر را به صورت عمودی اسکرول کنید - اسکرول متن را به همراه پس زمینه خواهید دید:

بدنه (پیوست پس‌زمینه: اسکرول؛ تصویر پس‌زمینه: url("bg.png")؛ ) #elem (عرض: 400 پیکسل؛ حاشیه: 0 خودکار؛ تراز متن: توجیه؛ وزن قلم: پررنگ؛ اندازه قلم: 20 پیکسل؛ )

مثال. مقدار پیمایش کنید

و اکنون ملک پس زمینه-پیوستتنظیم کنید درست شد. عنصر را به صورت عمودی اسکرول کنید و متن را در حال لغزش در پس زمینه خواهید دید:

بدنه (پیوست پس‌زمینه: ثابت؛ تصویر پس‌زمینه: url("bg.png")؛ ) #elem (عرض: 400 پیکسل؛ حاشیه: 0 خودکار؛ تراز متن: توجیه؛ وزن قلم: پررنگ؛ اندازه قلم: 20 پیکسل؛ )