۲) استفاده از تصویر زمینه برای وبلاگ/وبسایت به وسیله CSS

توجه: برای تمرین نکات ارائه شده در این متن، حتما از تصویری کوچک استفاده نمایید، مثلا تصویری با ابعاد 100 پیکسل در 100 پیکسل!

جهت انتخاب تصویر زمینه برای بدنه‌ سایت یا Body ، طبق شکل زیر عمل نموده و آدرس تصویر مورد نظر را بین پرانتز قرار دهید!

background, image, css, html

در حالت پیشفرض، تصویر مورد نظر تکرار شده و تمام زمینه ی سایت را پر می کند!

اما اگر نمی خواهید تصویر مورد نظر تمام زمینه ی سایت را اشغال نماید،‌ no-repeat را به کد فوق بیافزایید تا تصویر فقط یکبار نمایش داده شود!

background, image, css, html

ممکن است بخواهید تصویر مورد نظرتان، محیط بالای سایت یا فقط اطراف سایت را پوشش دهد!

در اینصورت طبق شکل زیر عمل نمایید!
(توجه کنید که بعد از بسته شدن پرانتز از ; استفاده شده است!)

background, image, css, html

یکبار هم به جای x از y‌ استفاده کنید تا دقیقا متوجه شوید که تصویر به چه صورت تکرار خواهد شد! (x یعنی تکرار تصویر در جهت محور x ها و y یعنی تکرار تصویر در جهت محور y ها)

۱) تغییر رنگ زمینه قالب وبلاگ/وبسایت با استفاده از CSS

۲) استفاده از تصویر زمینه برای وبلاگ/وبسایت به وسیله CSS

حمید توکلی 1389/09/05 ساعت 04:34 ب.ظ

نظرات 4 + ارسال نظر

میثم 1389/09/05 ساعت 06:05 ب.ظ

واقعا با سی اس اس دست آدم باز میشه، نسبت به اچ تی ام ال منظورمه!
خسته نباشید بابت سایت آموزشیتون

روح اله 1389/09/06 ساعت 11:25 ق.ظ

چقدر خوبه که متناتون طولانی و کسل کننده نیست و سریع به نتیجه میرسیمُ چون من یکی حوصله طولانی خونی رو ندارم

امین 1389/09/06 ساعت 10:32 ب.ظ

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

خیر دوست عزیزم!

تصویری که برای زمینه ی همین سایت به کار رفته:
http://s1.picofile.com/file/5445762880/bg_1.jpg

و کد CSS مربوط به این سایت:

body {
background: url(http://s1.picofile.com/file/5445762880/bg_1.jpg);
background-repeat:repeat-x
{

تصویر مورد نظر در محور x ها تکرار شده و باعث شده که زمینه ی سایت رو یک تصویر بزرگ تصور کنید، در حالی که اینطور نیست!

از مزیت های استفاده از این روش در CSS این هست که سایت زودتر Load میشه و سرعت بهتری خواهد داشت، تصویر مورد نظر 8 کیلوبایت هست اما اگر قرار بود یک تصویر بزرگ به کار ببریم، تبعا حجم بیشتری داشت که باعث کندی سایت میشد!

پیروز و پایدار باشید!