تصویر پس زمینه در html. تصویر پس زمینه

در این پست طبق معمول به شما خواهم گفت پس زمینه سایت را تنظیم کنیداستفاده كردن HTMLکد

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

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

به عنوان مثال، شما یک تصویر را در یک وب سایت می بینید، اما در کد HTML صفحه ممکن است به شکل زیر باشد:

یک رنگ ثابت برای پس زمینه صفحه تنظیم کنید.

به منظور نصب پس زمینه تک رنگ، نیاز به برچسب زدن دارد ویژگی اضافه کنید bgcolor.

< html >
< head >
< title >عنوان صفحه.

< body bgcolor = "#ffcc00" >

می توانید این کد را در یک فایل متنی قرار داده و با پسوند html ذخیره کنید. سپس با هر مرورگری باز کنید و نتیجه را ببینید.

همانطور که احتمالا حدس زده اید، رنگ پس زمینه به دلیل کد رنگ در ویژگی ظاهر می شود bgcolor = "ارزش"، که با مراجعه به این لینک قابل مشاهده است.

تنظیم یک تصویر در پس زمینه یک صفحه HTML.

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

< html >
< head >
< title >عنوان صفحه.

< body background = "http://сайт/images/mlmsecret.jpg" >سلام. این اولین صفحه من است.

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

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

برای اطلاع از مسیر قبلی، باید به صفحه ای که در آن تصویر وجود دارد بروید، روی عکس کلیک راست کرده و روی «Copy picture URL» کلیک کنید. به این ترتیب نام تصویر/پس زمینه را خواهید دید. سپس می توانید با استفاده از همان نام فایل، تصویر قدیمی را با تصویر خود جایگزین کنید.

اینها ساده ترین اصول اولیه برای راه اندازی بودند پس زمینه در html، حالا قسمت جالب می آید. 🙂

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مثال 1: تغییر رنگ پس زمینه

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

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

تصویر پس زمینه

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

مثال 2: افزودن یک کاغذ دیواری

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

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

مثال 3: استفاده از تصویر پس زمینه و رنگ پس زمینه

پس زمینه ثابت

به طور پیش فرض، وقتی از نوار پیمایش استفاده می کنید، تصویر پس زمینه با محتوای صفحه وب حرکت می کند. اینترنت اکسپلورر به شما امکان می دهد با استفاده از ویژگی تگ bgproperties = "fixed" پس زمینه را ثابت کنید .

مثال 4: تنظیم یک پس زمینه ثابت

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

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

ساخت پس زمینه

قبل از اینکه پس‌زمینه وب‌سایت را html کنید، باید کد html صفحه را در یک ویرایشگر متن باز کنید. باید به خاطر داشته باشید که برچسب ها در صفحه به صورت عمودی قرار می گیرند. سپس، بین تگ ها … ، باید یک تگ قرار دهید- این برچسب ها برای روشن شدن سبک عناصر یک صفحه وب مورد نیاز هستند. به جای سه نقطه که باید بنویسید - body (بک گراند:) . این گزینه ای است که به شما امکان می دهد سبک های مختلفی را برای پس زمینه صفحه تنظیم کنید. شما می توانید عملیات تنظیم رنگ را به دو صورت انجام دهید. اولین:

بدنه (پس‌زمینه:#000000) – پس‌زمینه صفحه اکنون باید سیاه باشد.

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

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

اکنون تصویری که انتخاب کرده اید پس زمینه کل صفحه سایت خواهد بود. امیدواریم نحوه ساخت پس زمینه در html را درک کرده باشید. فقط سعی کنید و مطمئنا همه چیز درست می شود!

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

تگ های اصلی HTML برای ایجاد پس زمینه

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

1. ویژگی تگ را بنویسید
2. از طریق سبک CSS در کد HTML.
3. استایل CSS را در یک فایل جداگانه بنویسید.

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

1. اولین راه برای نوشتن از طریق ویژگی تگ (body) در فایل index.htm است. به شکل زیر نوشته شده است: (body background= "Folder_name/Image_name.extension")(/body). یعنی اگر عکسی با نام "تصویر" و پسوند JPG داشته باشیم و نام پوشه را "Images" بگذاریم، ورودی کد HTML به این صورت خواهد بود: (body background="Images/Picture.jpg") … (/بدن) .
2. روش دوم ضبط بر سبک CSS تأثیر می گذارد، اما در همان فایلی به نام index.htm نوشته می شود. (body style="background: url("../Images/Picture.jpg")").
3. و روش سوم ضبط در دو فایل ساخته می شود. در سندی به نام index.htm خط زیر نوشته شده است: (head)(link rel="stylesheet" type="text/css" href="Path_to_CSS_file")(/head). و در فایل سبک به نام style.css قبلاً می نویسیم: body (پس زمینه: url(Images/Picture.jpg")).

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

راه هایی برای کشش تصویر پس زمینه به عرض پنجره

بیایید صفحه نمایش خود را به صورت درصد تصور کنیم. به نظر می رسد که کل عرض و طول صفحه نمایش 100٪ در 100٪ خواهد بود. باید تصویر را به این عرض بکشیم. بیایید یک خط به ورودی تصویر در فایل style.css اضافه کنیم که تصویر را به کل عرض و طول مانیتور کشیده می‌کند. چگونه این به سبک CSS نوشته شده است؟ ساده است!

پس زمینه: url (Images/Picture.jpg")

پس زمینه اندازه: 100%; /* این ورودی برای اکثر مرورگرهای مدرن مناسب است */

بنابراین ما متوجه شدیم که چگونه یک تصویر را به عنوان پس زمینه در html بسازیم تا کل صفحه را پر کند. همچنین راهی برای نوشتن در فایل index.htm وجود دارد. اگرچه این روش منسوخ شده است، اما دانستن و درک آن برای مبتدیان ضروری است. در تگ (head)(style) div (background-size: cover; ) (/style) (/head)، این ورودی به این معنی است که ما یک بلوک ویژه برای پس زمینه اختصاص می دهیم که در کل عرض آن قرار می گیرد. پنجره ما به دو روش برای تبدیل پس‌زمینه یک وب‌سایت به یک تصویر HTML نگاه کردیم تا تصویر در تمام عرض صفحه در هر مرورگر مدرنی کشیده شود.

چگونه یک پس زمینه ثابت بسازیم

اگر تصمیم دارید از یک تصویر به عنوان پس زمینه یک منبع وب آینده استفاده کنید، فقط باید دریابید که چگونه آن را بی حرکت کنید تا از نظر طول کشیده نشود و ظاهر زیبایی شناختی را خراب نکند. نوشتن این اضافه کوچک با کمک به اندازه کافی آسان است. شما باید یک عبارت را در فایل style.css پس از پس‌زمینه اضافه کنید: url(Images/Picture.jpg") ثابت شد؛ یا به جای آن یک خط جداگانه بعد از نقطه ویرگول - موقعیت: ثابت اضافه کنید. بنابراین، تصویر پس‌زمینه شما بی حرکت خواهد شد. با پیمایش در محتوای سایت، خواهید دید که خطوط متن حرکت می‌کنند، اما پس‌زمینه در جای خود باقی می‌ماند. بنابراین شما یاد گرفته‌اید که چگونه پس‌زمینه را به صورت html به روش‌های مختلف تبدیل به تصویر کنید.

کار با جدول در HTML

بسیاری از توسعه دهندگان وب بی تجربه، وقتی با جداول و بلوک ها مواجه می شوند، اغلب نمی دانند که چگونه یک تصویر را به عنوان پس زمینه جدول در HTML بسازند. مانند تمام سبک های CSS، این زبان برنامه نویسی وب بسیار ساده است. و راه حل چنین مشکلی نوشتن چند خط کد خواهد بود. باید بدانید که نوشتن سطرها و ستون های جدول به ترتیب به عنوان تگ های (tr) و (td) شناخته می شود. برای اینکه پس‌زمینه جدول به شکل تصویر باشد، باید یک عبارت ساده به تگ (table)، (tr) یا (td) اضافه کنید که نشان‌دهنده پیوند تصویر است: پس‌زمینه = URL تصویر. برای وضوح، اجازه دهید چند مثال بزنیم.

جداول دارای تصویر به جای پس زمینه: نمونه های HTML

بیایید یک جدول 2x3 بکشیم و پس‌زمینه آن را به صورت تصویر ذخیره‌شده در پوشه «تصاویر» تبدیل کنیم: (پس‌زمینه جدول = «Images/Picture.jpg») (tr) (td)1(/td) (td)2(/td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/جدول). به این ترتیب جدول ما در پس زمینه تصویر نقاشی می شود.

حالا بیایید همان صفحه را با ابعاد 2x3 بکشیم، اما یک تصویر را در ستون های شماره 1، 4، 5 و 6 قرار دهیم. )2 (/td) (td)3(/td)(/tr) (tr)(td background = "Images/Picture.jpg")4(/td) (td background = "Images/Picture.jpg") 5 ( /td) (td پس زمینه = "Images/Picture.jpg")6(/td) (/tr) (/table). پس از مشاهده، می بینیم که پس زمینه فقط در سلول هایی که در آنها ثبت نام کرده ایم ظاهر می شود و نه در کل جدول.

سازگاری بین مرورگرهای سایت

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