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

ما را باز کنیم index.html، برای ویرایش: من مدیریت کردم!!! و بیایید کمی آن را تغییر دهیم، ویژگی ها را اضافه کنیم: text="#000000" bgcolor="#ffffff"> انجامش دادم!!! صفتیک پارامتر برچسب است که به عنوان یک "جفت" در تگ درج می شود (نام پارامتر + مقدار پارامتر).
مقادیر ویژگی تگ درج شده است:
1) text=#000000 بدون نقل قول;
2) text="#000000" در نقل قول;
3) text="#000000" در دو گیومه.
هر کدام از این گزینه ها صحیح است، اما اگر به اخلاق کد اهمیت می دهید، بهتر است مانند مثال بالا از دو نقل قول استفاده کنید.

صفت "متن"رنگ متن را در کل صفحه کنترل می کند و "bgcolor"رنگ پس زمینه صفحه را کنترل می کند.

اکنون پیشنهاد می کنم در مورد رنگ ها برای اسناد HTML صحبت کنیم. رنگ تنظیم شده است:
1) متن "طلا"- کلمات در زبان انگلیسی، به عنوان مثال: طلایی (طلایی)، قرمز (قرمز)، سبز (سبز) و غیره...
اما یک رنگ می تواند فقط از یک کلمه تشکیل شده باشد، به عنوان مثال "قرمز"، اما اگر "سبز-قرمز" بنویسید، مرورگر آن را درک نمی کند و به سادگی آن را نادیده می گیرد.
2) text="#000000"- طرح رنگ RBG (قرمز سبز آبی). "#" این نماد نشان می دهد که این یک عدد رنگ است، دو علامت اول (صفر در مثال من) به ما می گویند که چند رنگ "قرمز" گرفته ایم، دومی سبز و دو علامت آخر آبی است.
هر رنگ از 00 تا FF (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F) مشخص شده است، به عنوان مثال #000000-مشکی، #ffffff-سفید، #ff0000-قرمز، # 00ff00- سبز #0000ff-آبی

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

حالا بیایید به پرونده خودمان برگردیم index.htmlو آن را به عنوان ذخیره کنید tsvet.html، حالا بیایید ببینیم چه اتفاقی افتاده است. او چگونه بود و چگونه ماند؟ و کاملا حق با شماست، زیرا رنگ سفید برای پس زمینه و سیاه برای متن رنگ پیش فرض است. برای مشاهده تفاوت، بیایید مقادیر ویژگی را تغییر دهیم:

text=gold" bgcolor="#0900b8"> انجامش دادم!!! بیایید ذخیره و تماشا کنیم (در یک برگه جدید باز می شود)

راه های دیگری برای تنظیم متن در فایل های HTML وجود دارد، اما این دو روش اصلی در نظر گرفته می شوند.

در فصل بعدی یاد خواهیم گرفت که چگونه متن را با تگ های BR دستکاری کرده و متن را در خط دیگری قرار دهیم.

پس زمینه یک سایت HTML را می توان با استفاده از هر دو ویژگی تگ تغییر داد بدن، و استفاده از سبک های CSS نیز برای تگ اعمال می شود بدن. بیایید هر دو گزینه را برای ایجاد پس زمینه برای یک وب سایت در نظر بگیریم.

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

برچسب بزنید بدنتقریباً مانند هر تگ HTML، ویژگی های خاص خود را دارد. برای برچسب زدن ویژگی ها بدنمربوط بودن:

• bgcolor- رنگ پس زمینه صفحه را مشخص می کند.
• زمینه- به شما امکان می دهد یک تصویر را به عنوان پس زمینه یک صفحه وب تنظیم کنید (این موضوع به طور مفصل در مقاله مورد بحث قرار گرفته است:)؛
• طومار- نمایش نوار اسکرول صفحه را کنترل می کند.
• متن- رنگ پایه متنی که در صفحه وب نمایش داده می شود را تنظیم می کند.
• bgproperties- نشان می دهد که آیا پس زمینه همراه با صفحه حرکت می کند یا خیر.
• ارتباط دادن- رنگ پیش فرض لینک ها را در صفحه کنترل می کند.
• پیوند- رنگ پیوند فعال را تنظیم می کند.
• vlink- رنگ پیوند بازدید شده در صفحه را مشخص می کند.
• حاشیه چپ/حاشیه راست- تورفتگی محتوا را از لبه چپ یا راست پنجره مرورگر تنظیم می کند.
• حاشیه بالا / حاشیه پایین- تورفتگی محتوا را از لبه بالا یا پایین پنجره مرورگر تنظیم می کند.

برای تغییر رنگ پس زمینه با استفاده از HTML، از ویژگی استفاده می کنیم bgcolor:

این نمونه ای از متن سفید است که با استفاده از ویژگی text تگ body مشخص شده است.

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

تغییر رنگ پس زمینه صفحه با استفاده از CSS

این نمونه ای از مجموعه متن سفید با استفاده از CSS پس زمینه است. پس زمینه صفحه نیز با استفاده از CSS تنظیم می شود.

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

از نویسنده:به webformyself خوش آمدید و امروز می خواهم به شما بگویم که چگونه پس زمینه سایت را تغییر دهید. رنگ پس‌زمینه یا تصویر در پس‌زمینه می‌تواند نقش بزرگی در ظاهر یک سایت داشته باشد، بنابراین باید بدانید که چگونه آن را تنظیم کنید.

نحوه تغییر پس زمینه در وردپرس

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

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

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

جاوا اسکریپت. شروع سریع

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

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

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

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

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

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

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

جاوا اسکریپت. شروع سریع

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

در واقع، این همه برای تغییر پس زمینه در وردپرس است. همانطور که می بینید، همه چیز تا حد امکان ساده است.

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

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

برای دسترسی به این همه استایل، باید استایل اصلی قالب خود را پیدا کنید. معمولاً در ریشه یا در پوشه css قرار دارد و style.css یا main.css نامیده می شود.

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

پس زمینه چگونه تنظیم می شود؟

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

بدنه (پس‌زمینه: #ccc url(bg.png) بدون تکرار 50% 50% ثابت؛ )

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

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

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

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

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

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

جاوا اسکریپت. شروع سریع

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

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

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

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

نحوه سفارشی سازی فونت

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

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

صفحه HTML وبلاگ یا وب سایت خود را باز کنید. هنگام ویرایش یک صفحه، می‌توانید آن را در Dreamweaver باز کنید تا کارتان آسان‌تر شود. اگر سایت شما با استفاده از سازنده وب سایت ایجاد شده است، برخی از سرویس ها به شما اجازه می دهند تنظیمات HTML را به صورت آنلاین با رفتن به صفحه «طراحی» و انتخاب تب «ویرایش HTML» تغییر دهید. در هر صورت، باید بتوانید به کدهای HTML وبلاگ یا وب سایت خود دسترسی داشته باشید. بسته به اینکه چه خدماتی در دسترس شما است و از چه موتوری استفاده می کنید، فرآیند راه اندازی می تواند بسیار متفاوت باشد.

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

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

بنابراین، کد رنگی را که می خواهید در سایت شما به عنوان رنگ پس زمینه نمایش داده شود، پیدا کنید. در نشانه گذاری به این صورت خواهد بود:

background-color:#XXXXXX; (

هنگامی که رنگ پس زمینه را در HTML ذخیره کردید، خواهید دید که ظاهر صفحه شما تغییر کرده است.

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

تصویری را که می خواهید به عنوان پس زمینه اضافه کنید انتخاب کنید. سایت های زیادی وجود دارند که به شما امکان دانلود چنین پس زمینه هایی را می دهند. یا می توانید از عکسی استفاده کنید که قبلاً در رایانه شما ذخیره شده است.

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

کد را برای اضافه کردن یک تصویر به عنوان پس‌زمینه جای‌گذاری کنید. در HTML به شکل زیر است:

background-image: url(image URL);

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

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

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

ویژگی COLOR

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

• نام رنگ (سبز، سیاه، قرمز...)؛
• کد رنگ هگزادسیمال (008000, 000000, FF0000...);
• کد رنگ اعشاری در RGB (رنگ: rgb (40، 175، 250))؛

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

همانطور که قبلاً اشاره کردم، می توانید تقریباً برای همه عناصر یک رنگ تنظیم کنید، اینها می توانند (H1... H6)، (strong، em) و حتی اعداد صحیح (p) و حتی حاشیه های جدول باشند، اما در ادامه بیشتر در مورد آن صحبت خواهیم کرد.

بیایید به مثالی از تنظیم رنگ متن با استفاده از CSS نگاه کنیم:

h1 (رنگ: آبی)

در این مثال، تمام عناوین سطح اول صفحه وب آبی خواهند بود:

قوی (رنگ: قرمز)

در این صورت هر آنچه در متن صفحه وجود دارد با تگ هایلایت می شود قوی، قرمز می شود.

می توانید آن را اینگونه بنویسید:

h1، p، قوی (رنگ: سبز)

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

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

class="Blue" > رنگ هدر این کلاس آبی خواهد بود

در شیوه نامه CSS، در این مورد، یک قانون می نویسیم که در آن انتخابگر عنصر H1 خواهد بود و از طریق نقطه ( . ) نام کلاس:

h1.آبی (رنگ: آبی)

در اسناد HTML، انتخابگرها بر اساس شناسه نیز استفاده می‌شوند که توسط ویژگی تعیین می‌شوند شناسه. یک شناسه یک ویژگی مهم یا اولویت دارتر از یک کلاس است. و اگر هر دو کلاس و شناسه برای عنصری در کد HTML مشخص شده باشند، سبک شناسه اعمال خواهد شد. شناسه با یک علامت هش نشان داده می شود ( # ). برای استفاده از شناسه در کد HTML، باید بنویسید:

id="آبی" > رنگ هدر این شناسه آبی خواهد بود

در شیوه نامه به نوبه خود:

h1#آبی (رنگ: آبی)

ویژگی BACKGROUND-COLOR

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

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

در این صورت پس زمینه صفحه فیروزه ای می شود و برای دادن پس زمینه به هدر می نویسیم:

h1 (رنگ پس زمینه: زرد)

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

رنگ و پس زمینه در CSS

ویژگی Background-REPEAT

این ویژگی زمانی استفاده می شود که تعیین شود آیا به صورت افقی و عمودی تکرار می شود یا خیر. مقادیر معتبر:

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

کد به این صورت نوشته شده است:

پ(
تصویر پس زمینه: url( آدرس فایل تصویری) ;
background-repeat : repeat-x
}

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

اموال BACKGROUND-ATTACHMENT

این ویژگی برای نشان دادن اینکه آیا تصویر پس‌زمینه صفحه باید همراه با متن پیمایش کند یا نه به مرورگر استفاده می‌شود ( طومار) یا بی حرکت بمانید ( درست شد).

بدن (
تصویر پس زمینه: url( آدرس فایل تصویری) ;
background-repeat : repeat-x ;
پس‌زمینه پیوست: ثابت شد
}

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

ویژگی BACKGROUND-POSITION

این ویژگی برای قرار دادن تصویر نسبت به . مقادیر بر حسب درصد (%)، واحد طول (cm، px)، با کلمات کلیدی مشخص می‌شوند:

• عمودی:
• بالا- بالای تصویر با لبه بالای صفحه یا بلوک تراز شده است.
• مرکز
• پایین- پایین تصویر با لبه پایین صفحه یا بلوک تراز شده است.
• به صورت افقی:
• ترک کرد- لبه سمت چپ تصویر با لبه سمت چپ صفحه یا بلوک تراز شده است.
• مرکز- مرکز تصویر با مرکز صفحه یا بلوک تراز شده است.
• درست- لبه سمت راست تصویر با لبه سمت راست صفحه یا بلوک تراز شده است.

ما یک کد نمونه را در درصد، واحد طول و کلمات کلیدی می نویسیم:

بدن (
تصویر پس زمینه: url( آدرس فایل تصویری) ;
موقعیت پس زمینه: 0% 0%
}

بدن (
تصویر پس زمینه: url( آدرس فایل تصویری) ;
موقعیت پس زمینه: 10 پیکسل 25 سانتی متر
}

بدن (
تصویر پس زمینه: url( آدرس فایل تصویری) ;
پس زمینه موقعیت: مرکز بالا
}