آموزش کلی قراردادن عکس و رنگ در پس زمینه وبلاگ

در این اموزش میخواهم چگونگی "قرار دادن عکس یا رنگ در بکگراند وب توی css"را قرار بدم؛

برای اینکار اول باید css رو پیدا کنید که توی پست قبلی به طور کامل توضیحات لازم را قرار داده ام:

توجه:به خاطر اشغال حجم وب وهمچنین مشکلات دیدن نوشته های وب وسرانجام باعث کاهش لود سایت شده و بازدید از سایتتون را کاهش میدهد وتو موتور های جستجو هم نتیجه خوبی نخواهد داشت؛ این روش رو توصیه نمیکنم ولی عده ای برای زیباتر کردن وب خود اینکار رو انجام میدن ...

حالا خود دانی بریم سراغ اموزش...

فرض کنیم فایل cssبازشده ما به صورت زیر باشد

body{margin:0;font-family: Tahoma;background:#000000 }

.Pichak{width:100%;float:right;direction:rtl;}

#main-back{float:right;width:100%;background:#00FF99}

a{TEXT-DECORATION: none;color:#99FFFF}

a:hover{color:#99FFFF}

#header{background:#FF00FF url(Header2.jpg ) no-repeat top right;height:365;width:105%;color:#33FF33;font-size:8pt;text-align:right}

#header a{color:#33FF33;margin:0 9;text-shadow: #33FF33 -1px 0px 4px;font-weight:bold;}

#header a:hover{color:#700816}

.Sid{padding:0 15 0 0;}

.main{padding:0 0 0 0;}

.top-BlogTitle{width:100%;height:40}

.top-menu{width:100%;height:300;}

.top-menu2{padding:0 50;}

.BlogTitle{color:#00FFFF;text-align:center;font-size:27pt;font-weight:bold;padding:0 350 0 0;font-family:Times New Roman;}

.Description{color:#151516;text-align:center;direction:rtl;font-size:9pt;padding:10 350 0 0;}

.post{float:right;direction:rtl;text-align:right;width:540;overflow:hidden}

.TopPost{width:540;height:80;background:url(' post1.png') no-repeat top right;font-size:9pt;}

.TopPost a{color:#0000CC}

.TopPost2{padding:24 70 4 10;}

.CenterPost{padding:10 15 5 15;background:url('post2.png') repeat-y right;margin:0 0}

.LowPost{width:540;height:80;background:url('post3.png') no-repeat top right;font-size:9pt;}

.date{text-align:right;color:#777777;float:right;width:435}

.date div{padding:25 35 0 0;}

.Comment{padding:43 45 0 0;text-align:right;font-size:8pt;width:100%;color:#9900FF}

.Comment a{color:#9900FF}

.Comment a:hover{color:#700816}

.Post-title{padding-bottom:19;font-weight:bold}

.t-date{font-size:9pt;color:#FF66FF;width:530;height:19;padding-right:73}

.C-post{font-size:8pt;color:#333333;width:530;overflow:hidden}

.C-post a{color:#700816}

#Sidebar{float:right;direction:rtl;text-align:right;width:220;overflow:hidden}

.TopSid{width:210;height:69;background:url(' sid1.png') no-repeat top right;font-size:8pt;color:#151516;font-weight:bold;}

.TopSid2{padding:31 40 0 0;text-align:right}

.CenterSid{width:210;font-size:8pt;color:#444444;background:sid2.png') repeat-y top right;padding:2 0}

.CenterSid a{color:#444444;}

.CenterSid a:hover{color:#700816}

.li-Sid{padding:1 20 5 5;background:url('li.png') 194px 5px no-repeat;}

.About{padding:0 15 0 15;color:#555555;line-height:120%}

.LowSid{width:210;height:22;background:url(' sid3.png') no-repeat top right;}

.footer{width:1000;float:right;background: url('footer.gif') no-repeat top right;height:100;direction:rtl;}

.footer a{color:#151516}

.footer a:hover{color:#700816}

.Fo1{font-size:8pt;text-align:center;padding:45 20 7 20;color:#151516}

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

سپس به جاش کد زیر رو قرار میدهید

body{font-family:Tahoma;font-size:8pt;padding:0px;margin:0px;color:#d1dcf3;background:#fff}

a, a:visited{color:#08233b;text-decoration: none}a:hover{color:#4582bb;text-decoration: none}

body {

BACKGROUND: #4582bb url('My_site.jpg ') repeat ;

}

#page{background:url(My_site.jpg ) center repeat-y;width:632px}img{border:none}

#uwrapper {margin:0;padding:0;text-align:center;background-image:url(My_site.jpg ); background-repeat:repeat-y; background-position-y:top;}

وسپس به جایMy-site.jpgادرس عکس خودتون رو قرار میدهید سعی کنید اندازش 400×1024

باشد وکیفیتش هم زیاد نباشد

توجه :

*عکسها را در جهت محور y ها تعریف کنید.

*ادرس اصلی را طبق اموزش قبلی قبل از فایلها قراردهید..

حالا کار تمام است وcssرا ذخیره و اپلود کنیدوبه جای ادرس اولیه cssقرار دهید ...

::::::::::::::::::::::::::::::::::::::::::::::::::::::::::

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

برای اینکار لازم به هیچ کد خاصی نمیباشد وفقط قبل از هدر رنگ بکگراند اصلی را پیدا کنیدمثلا

#main-back{float:right;width:100%;background:#000000}

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

آموزش کلی قراردادن عکس و رنگ در پس زمینه وبلاگ

مطالب مشابه :

تغيير عکس بالاي وبلاگ يا تغيير هدر

آموزش تغییر هدر ( سربرگ بالای وبلاگ )در css

آموزش تغییر رنگ فونت های قالب بلاگفا

آموزش تغییر هیدر ِ وبلاگ

آموزش تغییر هدر قالب و اختصاصی کردن قالب

آموزش کلی قراردادن عکس و رنگ در پس زمینه وبلاگ

نحوه قرار دادن عکس در بالای وبلاگ

چگونه می توانیم تصویر هدر وبلاگ خود را تغییر دهیم ؟

ویرایش هدر وبلاگ

عکسهایی از علی عبدالمالکی