اندازه دقیق فوتر برای قراردادن عکس

[moghimi]

با سلام به دوستان

در فوتر نسخه 1.6 اگر بخوایم عکس قرار بدیم و اون عکس به صورت کامل نمایش داده بشه چه تغییری در کد زیر باید داد؟

.footer-container {

background-color: #333333; }

@media (min-width: 768px) {

.footer-container {

background: url(../img/footer-bg.png) repeat scroll 0% 0% #333333;height: 500px;Border: 5px dashed #000 ; } }

 

البته با repeat خیلی دست و پنجه نرم کردم هم repeat-x رو با اندازه ارتفاع های مختلف تست کردم و هم repeat-y رو ولی این repeat تکرار می کنه که no- repeat هم عکس رو کامل فیت نمی کنه

اگر هم به جز فایل global.css باید جای دیگه ای تغییر کنه ممنون می شم راهنمایی کنین

[admin]

منظورتون از عکس به صورت کامل نمایش داده بشه اینه که کل فوتر رو بگیره یا این که خود اون عکس کامل نمایش داده بشه؟

[moghimi]

آقا مهرشاد منظورم این هست که در قالب دیفالت سایز عکس باید چند در چند باشه که کل فوتر رو پوشش بده؟

چون توی این کد

background: url(../img/footer-bg.png) repeat scroll 0% 0% #333333;height: 500px

اگر اینجوری بشه

background: url(../img/footer-bg.png) repeat-x scroll 0% 0% #333333;height: 500px

عکس رو تکرار می کنه

background: url(../img/footer-bg.png) no-repeat scroll 0% 0% #333333;height: 500px

اگر رو تکرار نمی کنه اما عکس رو به همون حالت و اندازه ای که هست نشون می ده

background: url(../img/footer-bg.png) repeat scroll 0% 0% #333333;height: 500px margin:0 -32px 0 -32px

یا

background: url(../img/footer-bg.png) repeat scroll 0% 0% #333333;height: 500px margin:0 -120px 0 -120px

هم قرار دادم تاثیر نداشت

یه چیزی این کد ها کم داره، که همون فیت شدن کامل عکس با فوتر هست

[admin]

انقدر شلوغ پلوغ نوشتید که گیج شدم اما منظورتون رو فهمیدم

ببینید برای این که یک بک گراند (پس زمینه) کل یک المان رو پوشش بده 2 عامل تاثیر گذار هستند:

1. باید خود اون المان کل پهنای سایت رو پوشش بده (یعنی هر پس زمینه ای که به هر المانی بدید حداکثر پهنای همون المان رو پوشش میده)

2. اگر بخواهید از نظر پهنا پس زمینه تکرار بشه باید از repeat-x و برای پوشش ارتفاع repeat-y و برای پوشش هر دو repeat و برای عدم تکرار (اگر پس زمینه به قدر کافی بزرگ هست و یا می خواهید فقط یکبار نشون داده بشه) از no-repeat استفاده کنید

عددهایی هم که بعد از repeat و ... میان برای خصیصه background نشان دهنده موقعیت شروع پس زمینه نسبت به بالا/پایین و چپ/راست هستند

[moghimi]

ممنون آقا مهرشاد

اما نکته اصلی رو نگفتین!

عرض فوتر یا سایت چند هست ؟ 726 PX یا ؟

منظورم این هست اگر راه اول رو برم و عکس کل اون عرض رو پوشش بده باید چه مقداری رو وارد کنم؟ با توضیحات بند 2 شما این کد رو می خوام بذارم

 

background: url(../img/footer-bg.png) no-repeat scroll 0% 0% #333333;height: 500px

حالا چه مقداری توی کد بالا کم هست تا کد عرض فوتر رو پوشش بده؟

ممنون

[admin]

این طوری معمولا در ریسپانسیو استفاده نمیشه مگر این که سایز المان ثابت باشه

اگر اشتباه نکنم پهنای اون بخش در قالب دیفالت 1170 پیکسل هست (که البته پیشنهاد نمیکنم از پس زمینه ای با پهنای 1170 پیکس ستفاده کنید چون به شدت در سرعت لود سایت تاثیر میذاره!)

[moghimi]

معمولا چه جوری هست همون تکرار یه عکس کوچک؟

[admin]

بله. البته به کل سعی کنید کمتر از عکس استفاده کنید و در صورت امکان از سی اس اس استفاده کنید مگر این که در مواقعی خاص مجبور به استفاده از عکس بشید

[koki]

دوستان ببخشید من میخواستم اسلایدر تصویر صفحه اصلی رو عریض کنم و میخوام که فقط نمایشی کنم یعنی کلیکی روش انجام نشه چیکار کنم

 

Sent from my Nexus 7 using Tapatalk

[admin]

هر سوال رو در بخش مرتبط بپرسید

[mnsb13600]

معمولا چه جوری هست همون تکرار یه عکس کوچک؟

از این کد استفاده کن و به جای “آدرس” باید آدرس تصویر زمینه خودتون رو قرار بدید.

 

background: url(آدرس) no-repeat center center fixed;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='آدرس', sizingMethod='scale');-ms-filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='آدرس', sizingMethod='scale')";