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

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

برای تنظیم یک تصویر به عنوان پس‌زمینه در Word 2007، 2010، 2013 یا 2016، باید به تب "Page Layout" رفته، روی دکمه "Page Color" کلیک کنید و گزینه "Fill Methods" را انتخاب کنید.

اگر از Word 2003 استفاده می کنید، برای انجام این کار باید منوی "Format - Background - Fill Methods" را باز کنید.

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

پس از اینکه تصویر مورد نظر در پنجره «روش‌های پر کردن» ظاهر شد، باید آن را با استفاده از دکمه «OK» ببندید.

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

سایر گزینه های طراحی پس زمینه صفحه

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

برای استفاده از بافت به عنوان پس‌زمینه، باید به تب “Texture” رفته و یکی از بافت‌های پیشنهادی را انتخاب کنید. شما همچنین می توانید بافت خود را آپلود کنید. برای انجام این کار، از دکمه "بافت دیگر" استفاده کنید.

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

همچنین می توانید از پرکردن یکنواخت یک رنگ به عنوان پس زمینه صفحه استفاده کنید. برای انجام این کار، کافی است روی دکمه “Page Color” در تب “Page Layout” کلیک کرده و یکی از رنگ های پیشنهادی را انتخاب کنید.

و برای حذف هر گونه پس‌زمینه صفحه، باید روی دکمه “Page Color” کلیک کرده و “No color” را انتخاب کنید.

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

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

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

شما فقط باید یک رنگ را در پالت دایره انتخاب کنید و شدت آن را در مربع تعیین کنید. در سمت راست دو کد برای 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: . در این مقاله در مورد استفاده از تصاویر به عنوان پس‌زمینه در یک وب‌سایت، نحوه کشش پس‌زمینه به عرض کامل صفحه و رفع آن صحبت می‌شود.

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

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

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

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

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

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

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

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

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

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

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

مرورگرهای مدرن به شما این امکان را می دهند که تعداد دلخواه تصاویر پس زمینه را به یک عنصر اضافه کنید و پارامترهای هر پس زمینه را که با کاما از هم جدا شده اند فهرست کنید. کافی است از ویژگی universal background استفاده کنید و ابتدا یک پس زمینه برای آن مشخص کنید و یک پس زمینه دوم را با کاما از هم جدا کنید.

چگونه پس زمینه را به عرض کامل پنجره بکشیم؟

برای مقیاس‌بندی پس‌زمینه، از ویژگی background-size استفاده کنید؛ مقدار آن را روی 100% تنظیم کنید، سپس پس‌زمینه کل عرض پنجره مرورگر را اشغال می‌کند. برای نسخه های قدیمی مرورگرها، باید از ویژگی های خاص با پیشوندها استفاده کنید، همانطور که در مثال 1 نشان داده شده است.

چگونه یک تصویر پس زمینه به یک صفحه وب اضافه کنیم؟

برای افزودن یک تصویر پس‌زمینه به یک صفحه وب، مسیر تصویر را در مقدار url ویژگی پس‌زمینه سبک تنظیم کنید، که به نوبه خود به انتخابگر بدنه اضافه می‌شود.

آیا امکان ساخت پس زمینه متحرک وجود دارد؟

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

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

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

برای کنترل موقعیت تصویر پس‌زمینه در صفحه، از ویژگی background-position style استفاده می‌شود؛ این ویژگی به طور همزمان مختصات افقی و عمودی تصویر را تنظیم می‌کند. برای لغو تکرار یک تصویر پس زمینه، از ویژگی background-position با مقدار no-repeat استفاده کنید.

چگونه می توانم از تکرار پس زمینه جلوگیری کنم؟

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

چگونه می توانم پس زمینه را فقط به صورت عمودی تکرار کنم؟

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

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

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

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

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

روش های مختلفی برای تغییر پس زمینه یک وب سایت وجود دارد. برای این کار از قابلیت های 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 استفاده کنید. مقادیری که می پذیرد عبارتند از:

• طومار؛


• درست شد.

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

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

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

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

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