آموزش کامل CSS – قسمت چهارم: پس زمینه

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

پس زمینه در CSS

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

اضافه کردن رنگ

برای رنگ آمیزی در css از 3 روش استفاده می کنیم:

روش اول 

در این روش از کد HEX به شکل زیر استفاده می کنیم و کد رنگ را همراه با علامت # به کار می بریم. کد هگزادسیمال رنگ یک مقدار کاراکتری ترکیبی از اعداد 0 تا 9 و حروف a تا f می باشد.

مثال: “#c91021”

روش دوم 

در این روش از کد RGB رنگ به صورت زیر استفاده می کنیم. ابتدا کلمه rgb را می نویسیم سپس یک پرانتز باز می کنیم و رنگ را به صورت کد آر جی بی در آن می نویسیم.

مثال: “rgb (255,0,0)”

روش سوم

در این روش نام رنگ را در یک جفت دابل کوتیشن به کار می بریم. انتخاب رنگ ها در این روش محدود است.

رنگ پس زمینه

این ویژگی background-color نام دارد و رنگ مورد نظر به هر سه شکل فوق در جلوی آن قابل استفاده است. روش استفاده از آن به صورت زیر است:

backgroud-color: blue;

backgroud-color: #c91021;

background-color: rgb (255,0,0);

عکس پس زمینه

این ویژگی background-image نام دارد و تصویر پس زمینه المان های اچ تی ام ال را تغییر می دهد. آدرس عکس به صورت زیر در مقابل آن قرار می گیرد:

background-image: url(“image address”);

توجه داشته باشید که در ذکر آدرس عکس فرمت آن را مانند زیر حتما بنویسید:

background-image: url(“http://pardiswp.com/image.jpg”);

تکرار تصویر پس زمینه

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

• تکرار افقی: در این حالت عکس به صورت افقی تا زمانی که پس زمینه را پر کند تکرار می شود.

background-image: url(“http://pardiswp.com/image.jpg”);

background-repeat: repeat-x;

• تکرار عمودی: در این حالت عکس به صورت عمودی تا زمانی که پس زمینه را پر کند تکرار می شود.

background-image: url(“http://pardiswp.com/image.jpg”);

background-repeat: repeat-y;

برای جلوگیری از تکرار تصویر دستور زیر را وارد می کنیم:

background-repeat: no repeat;

پایان قسمت چهارم