سلام دوستان در این پست برای شما نحوی درج پس زمینه در صفحات وب رو از طریق سی اس اس آموزش دادم .
در این مطلب نحوی قرار دادن رنگ و قرار دادن تصویر برای پس زمینه رو به شما آموزش میدهم . اگر در قسمتی به مشکل خوردید ، مشکلتان را با ما مطرح کنید تا آن را برطرف کنیم. امیدوارم این آموزش بخشی از نیاز های شما دوستان رو برطرف کنه .
لطفا نظرات خود را در مورد این مطلب با ما درمیان بگذارید.
1- رنگ پس زمینه
برای نمونه درج رنگ پس زمینه برای زمینه اصلی سایت
body {background-color:#b0c4de;}
#b0c4de
کد رنگی است که میخواهیم در پس زمینه به این رنگ باشد
رنگ پس زمینه را میتوانیم به صورت تعیین کنیم:
کد هکس رنگ مثل: #ccffcc
کد RGB رنگ مثل: rgb(255,0,0)
نام رنگ مثل: red
از دیگر کاربرد های این کد تغییر پس زمینه پاراگراف ، استایل و … هم میباشد:
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
2- تصویر پس زمینه
از طریق کد زیر میتوانیم تصویر پس زمینه مورد نظر را بارگذاری کنیم:
body {background-image:url(‘paper.gif’);}
– تکرار تصویر پس زمینه:
اگر بخواهیم تصاویر تکرار شوند از قطعه کد زیر استفاده میکنیم:
background-repeat:repeat;
اگر بخواهیم تصاویر فقط به صورت افقی تکرار شوند از کد زیر استفاده میکنیم:
background-repeat:repeat-y;
اگر بخواهیم تصاویر فقط به صورت عمودی تکرار شوند از کد زیر استفاده میکنیم:
background-repeat:repeat-x;
اگر بخواهیم تصاویر تکرار نشود از کد زیر استفاده میکنیم:
background-repeat:no-repeat;
– تعیین موقعیت تصویر پس زمینه:
برای تعیین موقعیت تصویر پس زمینه میتوانیم به دلخواه از یکی از کد های زیر استفاده کنیم:
چپ بالا:
background-position:left top;
چپ وسط:
background-position:left center;
چپ پایین:
background-position:left bottom;
راست بالا:
background-position:right top;
راست وسط:
background-position:right center;
راست پایین:
background-position:right bottom;
وسط بالا:
background-position:center top;
مرکز:
background-position:center center;
وسط پایین:
background-position:center bottom;
تعیین بر حسب درصد:
background-position:50% 50%;
تعیین بر حسب فاصله:
background-position:10px 200px;
– حرکت / عدم حرکت تصویر پس زمینه با اسکرول:
در صورتی که بخواهیم تصویر پس زمینه ثابت باشد و با حرکت اسکرول حرکت نکند از کد زیر استفاده میکنیم:
background-attachment:fixed;
و در صورتی که میخواهیم تصویر پس زمینه با حرکت اسکرول حرکت کند از کد زیر استفاده میکنیم:
background-attachment:scroll;
در دنیای بیپایان نرمافزارها و فایلهای دیجیتال، امنیت در دانلود و استفاده از آنها یک…
شرکت ایسوس یکی از پیشتازان در صنعت فناوری اطلاعات و الکترونیک است که در زمینه…
آیا شما هم به دنبال کار با کد های پاورشل برای هک هستید؟ در این…
این روزها که همه افراد به دنبال یک شغل پردرآمد می گردند، مشغول به کار…
خطای page isn’t available right now یکی از آزار دهنده ترین مشکلاتی است که کاربران…
ویندوز پاورشل چیست؟ پاورشل ابزاری قدرتمند به حساب می آید که همه افراد علاقه مند…
View Comments
براي مشخص كردن رنگش بايد به جاي كالر رنگو بنويسم يا همين كد بدون دستكاري تو ويرايش بذارم؟؟؟؟؟؟
body {background-color:#b0c4de;}
بجای #b0c4de کد هکسی رنگ دلخواهتون رو بنویسید.
کد هکسی هر رنگی رو میتونید در نرم افزار فتوشاپ مشاهده کنید.
ببخشيد در تصوير پيش زمينه كد اول ميذاريم بعد يكي از كدايي كه داديد رو اضافه بر اون گپي ميكنيم؟
خواهش میشود :)
بله کد ها رو اضافه میکنید:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
میتونید به صورت خلاصه هم بنویسید:
مثلا: body {background:#ffffff url('img_tree.png') no-repeat right top;}
سلام
ممنون
حالت خلاصه بهتره
سلام ، خواهش :)
برای کسانی که میخواهند شروع کنند شاید کمی سخت تر باشه :)
سلام ، نه خلاصه مشکلاتی هم داره
اینترنت اکسپلور توانایی خواندن حالت خلاصه رو نداره.
سلام من کد بک گراند رو عوض می کنم ولی قسمت عنوان ستون ها هم عوض میشه با ید چی کار کنم تا عوض نشه ؟
سلام، کدام کلاس رو ادیت میکنید؟ body?
من آدرس css رو پیدا کردم و بعد از تغیر آپلود کردم و بعد در کد قالب جایگزین کردم .
خط چندم رو ادیت میکنید؟
متوجه منظورتون نمی شم اگه منظورتون اینه که کدام قسمت کد رو عوض می کنم من فقط قسمت کد رنگ رو مثلا این قسمت رو #e5e2a2 البته از این روش که بالا گفتید استفاده کردم اصلا تغیری نیافت اینو با روش تغیر css انجام می دم . در ضمن ببخشید اگه من متوجه حرفتون نمی شه آخه من خیلی بلد نیستم با کد ها کار کنم .
خواهش میکنم،
تو این فایل : http://www.iranskin.com/template3/24/m24.css
خط چندم رو تغییر میدید؟ کد رنگش رو تغییر میدید
یه بار خط اول رو تغیردادم کد رنگ اش رو ، و یه بار هم هر دو خط رو .
سلام و خسته نباشید
میخوام دو تا عکس در پس زمینه وبلاگ داشته باشم و اینکارو میخوام در سی اس اس انجام بدم.
میخوام یکیش اسکرول بشه و یکیش فیکس بشه طوری که عکس فیکس شده کل صفحه رو بگیره و اونیکه اسکرول میشه روی اون بیفته و با اسکرول به بالا بره
سلام، با این کد میشه پس زمینه فیکس گذاشت
background-attachment:fixed;background:url(../img/site/home.jpg) center no-repeat fixed;
اگر میخواین یک بک گراند دیگر هم روی این بیاد روشی داره که باید به طراح قالبتون بگین، چون روی هر قالبی با یک روش خاص جواب میده فرق داره....
آقای آرش
امکانش هست روش رو بگین یا راهنمایی کوچولو بکنید چون طراح قالب یکی دیگه است و برای وبلاگ استفاده میکنم. خودم یه جاهایی رو تغییر دادم و طراح قالب رو نمی شناسم
ممنون میشم راهنمایی کنید