طراحی سایت ساناتک
0
تکرار تصاویر پس زمینه در css

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

تکرارهای افقی background در css

این امکان وجود دارد که یک تصویر را به صورت افقی آنقدر تکرار کرده تا تمامی صفحه را در برگیرد، برای مثال از چپ به راست و به صورت افقی، در اینجا محور x را به عنوان محور افقی و محور y را به عنوان محور عمودی در کدهای خود در نظر می گیریم، کد زیر یک عکس را در راستای افقی تکرار می کند:

#verticalfade {

border: 1px solid black;

padding: 20px;

padding-top: 300px;

background-color: #e3e3e3;

background-image: url(vert-fade.gif);

background-repeat: repeat-x;

}

تکرار افقی یک تصویر برای استفاده به عنوان پس‌زمینه

 در واقع تصویری که به صورت افقی تکرار می شود عرضی بسیار کمتر از ارتفاع دارد، با تکرار پیاپی این عکس تکراری تصویر پس زمینه ما ساخته می شود. در نظر بگیرید که با دریافت یک عکس با حجم پایین و تکرار آن کاربر مجبور نیست اینترنت پرسرعتی داشته و داده زیادی دریافت کند.

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

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

#horizontalfade

{

border: 1px solid black;

background-color: white;

background-image: url(hori-fade.gif);

background-repeat: repeat-y;

padding: 20px;

padding-left: 180px;

در عکس زیر می توانید نتیجه را مشاهده کنید.

تکرار عمودی یک عکس

عکس هایی که نمی خواهیم در پس‌زمینه تکرار شوند.

شاید در مواقعی بخواهید از عکسی به عنوان پس زمینه استفاده کنید و نخواهید در صفحه تکرار شود، برای مثال می توان از یک لوگو یا watermark شرکت خاص نام برد. هر کاری از این دست در نظر دارید به راحتی با CSS و تقریبا مشابه با مثال های بالا پیاده سازی می شود. در این مواقع باید از no-repeat استفاده کنید تا مرورگر بداند قصد تکرار عکس را ندارید، همچنین باید ناحیه ای را که می خواهید عکس در آن قرار داده شود در CSS تعریف کنید:

#palmtree {

border: 1px solid black;

background-color: white;

background-image: url(palm-trees.jpg);

background-repeat: no-repeat;

background-position: right top;

padding: 60px;

padding-right: 210px;

}

تصویری به عنوان عکسی که تکرار نشود

 

خصوصیت background-position نیازمند دو مقدار است: مختصات افقی(left، center و یا right) و عمودی(top، center و یا bottom).

اگر از دستور no-repeat بدون مشخص کردن مقدار background-position استفاده کنید، مرورگر عکس شما را در بالا سمت چپ صفحه جای خواهد داد.

به همان ترتیب که می توانستیم رنگ، ظاهر، و ضخامت یک حاشیه را با استفاده از خصوصیت shorthand تعریف کنیم، در اینجا هم می توانیم با استفاده از این خصوصیت تصویر و رنگ پس‌ زمینه را نیز برای صفحات سایت خود تعریف کنیم.

#repeatedclouds {

border: 1px solid black;

padding: 20px;

background: #aebbdb url(clouds.jpg);

}

#palmtree {

border: 1px solid black;

background: white url(palm-trees.jpg) no-repeat right top;

padding: 60px;

padding-right: 210px;

}

 

تعداد بازدید: 187
مطالب دیگر آموزش طراحی سایت
باگ‌ های شناخته شده مرورگرهاراستی‌ آزمایی کدهای CSS و HTML بعد از طراحی سایترفع خطاهای احتمالی هنگام طراحی سایتدقیق‌ تر شدن در استفاده از jQueryنمایش کپشن‌ های تصاویر درون گالری سایت
 
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید