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

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

• 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 تنظیم می شود.

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

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

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

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

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

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

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

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

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

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

برای تکمیل کار، می توانید از یکی از 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 را با استفاده از یک تصویر ایجاد کنید، به سادگی خط کد را وارد کنید:

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

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

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

من همچنین در مورد برخی از تفاوت های ظریف صحبت خواهم کرد که پس زمینه را یکدست تر و زیباتر می کند. خوب، شروع کنیم؟

انتخاب یک عکس

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

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

اگرچه، شما این فرصت را دارید که سیستم را دور بزنید. برای این کار از فتوشاپ و تصاویر تا عرض صفحه (1280x720) استفاده کنید. اگرچه در این حالت، هنگام اسکرول کردن به پایین، تصویر جایگزین دیگری می شود.

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

اگر علاقه مند به عدم وجود عواقب قانونی برای استفاده از آنها هستید، توصیه می کنم در وب سایت جستجو کنید Pixabay.com .

HTML

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

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

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

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

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

این URL را دقیقاً کپی کنید.

سند را ذخیره کنید. فراموش نکنید که اگر از notepad استفاده می کنید، باید از افزونه استفاده کنید .html . برای مثال، فقط سند را نام ببرید، back.html . در غیر این صورت، به عنوان یک سند متنی ذخیره می شود و مرورگر به سادگی متوجه نمی شود که چه کاری باید انجام دهد.

انجام شد، صفحه با رنگ دیگری پر شده است.

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

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

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

با من موافق نیستی؟ من می توانم یک جایگزین ارائه کنم. کتاب الیزابت و اریکا فریمن آموزش HTML، XHTML و CSS " یک پرفروش خیلی خسته کننده نیست و چندی پیش، در سال 2016 منتشر شد. اطلاعات هنوز قدیمی نشده است.

CSS

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

CSS به حل این مشکل کمک می کند. شما باید یک فایل با پسوند css ایجاد کنید و کد زیر را وارد کنید:

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

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

با css می توانید کشش دهید تصویر پس زمینه، مطمئن شوید که تکرار نمی شود، انیمیشن GIF و موارد دیگر را اضافه کنید.

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

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

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

به هر حال، همراه با این دوره، 7 جایزه دریافت می کنید: اصول اولیه html و css توسط آندری برناتسکی، طرح بندی برای مبتدیان، ایجاد یک صفحه فرود در یک شب و موارد دیگر. قبل از اینکه به آموزش جدی متعهد شوید، دوره رایگان را امتحان کنید. HTML5 و CSS3 را تمرین کنید ».

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

اطلاعات مختصر

نسخه های CSS

ارزش های

HTML5 CSS2.1 IE Cr Op Sa Fx

مدل شی

document.getElementById("elementID").style.backgroundImage

مرورگرها

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

اگر عنصر روی پیمایش یا خودکار تنظیم شده باشد، Internet Explorer 8 زمانی که پس‌زمینه پیمایش می‌کند تاخیر عمودی یک پیکسلی خواهد داشت.

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

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

HTML5 CSS2.1 IE Cr Op Sa Fx

نتیجه این مثال در مرورگر کروم در شکل نشان داده شده است. 1. مرورگرهای اینترنت اکسپلورر، اپرا و فایرفاکس به درستی پس زمینه خط را نمایش می دهند (شکل 2).

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

برنج. 2. پس زمینه برای کل خط