پس زمینه در css
سلام دوستان در این پست برای شما نحوی درج پس زمینه در صفحات وب رو از طریق سی اس اس آموزش دادم .
در این مطلب نحوی قرار دادن رنگ و قرار دادن تصویر برای پس زمینه رو به شما آموزش میدهم . اگر در قسمتی به مشکل خوردید ، مشکلتان را با ما مطرح کنید تا آن را برطرف کنیم. امیدوارم این آموزش بخشی از نیاز های شما دوستان رو برطرف کنه .
لطفا نظرات خود را در مورد این مطلب با ما درمیان بگذارید.
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;
سلام
مطلب عالی بود ممنون
خیلی ممنونم
سلام ببخشیدچگونه میشه یه عکس رودرسایتم با سی اس اس قراربدم چون من هرچه جای ادرس عکس باید فقط اسم عکس روبایدنوشت یا آدرس اون عکس رو؟من چندبارامتحان کردم ولی نشد که نشد به جای عکس یه ضرب درقرمزمیاد.اگه میشه جواب بدین ممنون میشم ضروریه.مرسی
background-size:cover ;
سلام دستور بالا باعث میشه که تصویر پس زمینه با اندازه ی هر مانیتوری فیکس
بشه ممکنه شما یه صفحه طراحی کنید و براش یه پس زمینه بزارید وقتی که این پس زمینه رو تو کامپیوتر خودتون تست میکنید طول و عرضش نرمال باشه ولی وقتی که اونو تو یه مانیتور کوچیکتر یا بزرگتر تست کنید این پس زمینه بهم بریزه دستور بالا از این مشکل جلوگیری میکنه 🙂
سلام
بسیار عالی
مرسی 🙂
سلام
چگونه میشه در یک صفحه دوتا عکس گذاشت که یکی پس زمینه باشه و یکی دیگه هم یک تصویر ؟
سلام
چجوري مي تونيم تصويري رو براي پسزمينه قرار بديم و متن رو روي تصوير بزاريم؟
موضوع اینه که روی هر قالبی یه طور خاصی جواب میده. با کد های سی اس اس انجام میشه و در صورت لازم جاوا…
متاسفانه اگر وقت داشتم انجام میدادم…
مشکلی نداره خودم آخرش درسش میکنم از راهنماییات ممنون
شما یه چیزی بگی من رو هوا میزنم-ترفندتو بگی با این حال که چیزی در موردش نخوندم ولی از روی تجربه میگیرم چی میگی
دو تا بکگراند رو نمیشه روی هم گذاشت مگر این که قالب رو خودم طراحی میکردم و ترفند هایی رو میزدم. من اینجا آموزشش بدم میدونم که به جایی نمیرسه چون روی هر قالبی یه جوره خاصی جواب میده!
نمیشه آقای آرش فقط یکی رو میندازه
سلام
این قابل رو دانلود کنید (مثلا با IDM) بعد با نوت پد بازش کنید.
http://www.samenblog.com/uploads/a/azubargh/87682.css
سپس این کد رو درجای مناسب قرار بدید:
body.
{
background-attachment:fixed;background:url(../img/site/home.jpg) center no-repeat fixed;
}
بعد در یک هاستی (فضا) آپلود کنید (آپلود سنترها نه) مثلا در پرشین گیگ. بعد آدرس این فایل رو به صورت زیر در کد قالب خود (کد HTML) قرار بدین. اینجوری:
به دلیل حذف شدن خود به خود کد مجبور شدم عکس بدم برای مشاهد کد اینجا کلیک کنید.
»»» توجه کنید که در کد بالا تمامی ستاره هارو حذف کنید«««
مشکلی بود همینجا بگین بازم
آقای آرش
امکانش هست روش رو بگین یا راهنمایی کوچولو بکنید چون طراح قالب یکی دیگه است و برای وبلاگ استفاده میکنم. خودم یه جاهایی رو تغییر دادم و طراح قالب رو نمی شناسم
ممنون میشم راهنمایی کنید
سلام، با این کد میشه پس زمینه فیکس گذاشت
background-attachment:fixed;background:url(../img/site/home.jpg) center no-repeat fixed;
اگر میخواین یک بک گراند دیگر هم روی این بیاد روشی داره که باید به طراح قالبتون بگین، چون روی هر قالبی با یک روش خاص جواب میده فرق داره….
سلام و خسته نباشید
میخوام دو تا عکس در پس زمینه وبلاگ داشته باشم و اینکارو میخوام در سی اس اس انجام بدم.
میخوام یکیش اسکرول بشه و یکیش فیکس بشه طوری که عکس فیکس شده کل صفحه رو بگیره و اونیکه اسکرول میشه روی اون بیفته و با اسکرول به بالا بره
یه بار خط اول رو تغیردادم کد رنگ اش رو ، و یه بار هم هر دو خط رو .
متوجه منظورتون نمی شم اگه منظورتون اینه که کدام قسمت کد رو عوض می کنم من فقط قسمت کد رنگ رو مثلا این قسمت رو #e5e2a2 البته از این روش که بالا گفتید استفاده کردم اصلا تغیری نیافت اینو با روش تغیر css انجام می دم . در ضمن ببخشید اگه من متوجه حرفتون نمی شه آخه من خیلی بلد نیستم با کد ها کار کنم .
خواهش میکنم،
تو این فایل : http://www.iranskin.com/template3/24/m24.css
خط چندم رو تغییر میدید؟ کد رنگش رو تغییر میدید
من آدرس css رو پیدا کردم و بعد از تغیر آپلود کردم و بعد در کد قالب جایگزین کردم .
خط چندم رو ادیت میکنید؟
سلام من کد بک گراند رو عوض می کنم ولی قسمت عنوان ستون ها هم عوض میشه با ید چی کار کنم تا عوض نشه ؟
سلام، کدام کلاس رو ادیت میکنید؟ body?
سلام
ممنون
حالت خلاصه بهتره
سلام ، نه خلاصه مشکلاتی هم داره
اینترنت اکسپلور توانایی خواندن حالت خلاصه رو نداره.
سلام ، خواهش 🙂
برای کسانی که میخواهند شروع کنند شاید کمی سخت تر باشه 🙂
ببخشيد در تصوير پيش زمينه كد اول ميذاريم بعد يكي از كدايي كه داديد رو اضافه بر اون گپي ميكنيم؟
خواهش میشود 🙂
بله کد ها رو اضافه میکنید:
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;}