PDA

View Full Version : مبتدی: ایجاد بکگراند بالا و پایین سایت



Amin69
شنبه 14 تیر 1393, 02:35 صبح
سلام دوستان
من میخوام برای یه صفحه در قسمت بالا و پایینش یک بکگراند بذارم که کل عرض صفحه رو بگیره.
برای قسمت بالا کدی که نوشتم جواب میده. اما نمیدونم برای پایین صفحه باید چیکار کنم؟!!


<style type="text/css">
Body{
margin-top:15px;
background-repeat:repeat-x;
background-image: url('/uploads/349_4247_1404369579461_bg_header.jpg');
background-repeat:repeat-x;
background-position: center top;
}
a{
text-decoration:none;
}
</style>

ab.ali
شنبه 14 تیر 1393, 11:56 صبح
اینطور که من متوجه شدم می خواین از دو تا Background استفاده کنید برای این کار :



background-image:url(),url();
background-position: , ;


یعنی دو تا پس زمینه رو با هم به Body بدین و موقعیت هر کردوم رو با توجه به اولی یا دومی بودنشون مشخص کنید !

vimax23
شنبه 14 تیر 1393, 11:57 صبح
شما چرا دو تا background-repeat:repeat-x; گذاشتی؟
بعد همین میدونی یعنی چی؟ یعنی عکسو در جهت افقی تکرارش کن در حالی که شما میخوایی کل رو بگیره نیاز به این ریپیت نداره
چند راه داری هم با سی اس اس هم با جاوااسکریپت
مثلا میتونی یه دیو بسازی یه کلاس بهش بدی تو دیو با تگ img عکس بزاری
بعد تو کلاس سی اس اس اون دیو بهش ارتفاع و عرض بدی مثلا 100 درصد بعد پوزیشنش رو روی fixed تنظیم کنی
واسه اون عکس هم داخل دیو میتونی اسم کلاس دیو رو اول بزاری بعد فاصله img بعد توش min-height و min-width با پوزیشن absolute بدی لازم به گفتن نیست که تنظیم جایگیری خود عکس در صفحه با چپ و راست و بالا و پائین میتونی تنظیم کنی

روش بعدی بازم با سی اس اس به این شکل که برای اون عکسه پوزیشنش رو fixed تنظیم بکنی min-height و min-width روی تنظیم کنی عرض رو 100 درصد بدی و ارتفاع رو اتوماتیک یعنی auto بدی

روش بعدی با سی اس اس 3 میتونی برای مرورگرهای مختلف سایز بک گراند رو از cover استفاده میکنی اینطوری

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;


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

Amin69
شنبه 14 تیر 1393, 15:37 عصر
اینطور که من متوجه شدم می خواین از دو تا Background استفاده کنید برای این کار :



background-image:url(),url();
background-position: , ;


یعنی دو تا پس زمینه رو با هم به Body بدین و موقعیت هر کردوم رو با توجه به اولی یا دومی بودنشون مشخص کنید !

ممنون. این چیزی که فرمودید یه جا امتحان کردم جواب داد، اما در cmsی که من استفاده میکنم جواب نمیده و ارور میده!
راه دیگه نداره؟

ab.ali
شنبه 14 تیر 1393, 20:55 عصر
ممنون. این چیزی که فرمودید یه جا امتحان کردم جواب داد، اما در cmsی که من استفاده میکنم جواب نمیده و ارور میده!
راه دیگه نداره؟

می تونید از دو تا Div استفاده کنید وبه هر کدوم پس زمینه شخصی بدین! چرا برای cms تون کار نمی کنه؟