قرار دادن عکس (لوگو)در بک گراند جدول

[sg.programmer]

قرار دادن عکس (لوگو)در بک گراند جدول چطوریک عکس را در لوگوی سایتم بزارم که پهنای آن تغییر کنه و ارتفاع ثابت بمونه (پهنای آن کل پهنای سایت باشه) عکسم در سایز مثلا 170*700 ، 170 ثابت باشه و پهنای اون (700) بالای سایت را بپوشونه ، پهنا همون 700 باقی می مونه ولی دو تیکه می شه عکس - آیا باید از سایز ثابتی استفاده کنم ؟ اگه اینطوره چه سایزی باشه تا در رزولوشن های متغیر هم عمل کنه و کل پهنای بالای سایت را بپوشونه؟

[alismith]

سلام دوست عزیز
من دقیق متوجه نشدم منظورتون از لوگو چی هستش اما می تونید برای background جدول اینگونه عمل کنید :


table{

width: 100%;
background: url(Image Address) repeat-x center top;

}


در اینجا فقط عرض عکس با عرض صفحه تغییر می کنه
اما باز یه مسئله اینجا باقی می مونه که همون تکرار شدن عکس هستش، شما میگی عکس تکرار بشه اما عرض همون 700 باشه و در تمام مرورگرها و رزولوشن ها پهنای بالای سایت رو بپوشونه و از همه مهم تر اینکه شما نمی خواهید با افزایش عرض عکس در رزولوشن های مختلف عکس به چند تیکه تکرار شود

حالا راه حل چیست:

این مشکل به کمک css3 حل میشه فقط کافیه به style بالا این دستورات رو اضافه کنید :


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


موفق باشید

[sg.programmer]

من از این استفاده میکنم ولی عکسم کل لوگوی سایت را نمی گیره و فقط همون پهنای عکس هست و تکرار هم قطع شد
<td align="left" style="background-image: url(Images/mainlogo.jpg) ;background-repeat:no-repeat; width: 100%">

حالا می خوام عکسم که پهنای اون 700 هست 100% پهنا را بگیره


*****************
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-khtml-background-size: cover;
background-size: cover;
*********************************
این کد ها چیه و چیکار میکنه
cover؟
webkit؟
moz؟
khtml؟

[alismith]

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



background: url(Image Address) repeat-x center top;


در اینجا repeat-x مشکل شما رو حل می کنه

-------------------------------------------------------



این کد ها چیه و چیکار میکنه
cover؟
webkit؟
moz؟
khtml؟


در اینجا شما با شناسایی engine مرورگر دارید این دستور رو می فرستید که اون عکس رو نسبت به عرض و طول صفحه cover کنه یعنی به اون اندازه گسترش بده


موفق باشید

[sg.programmer]

سلام
تشکر چطوری باید از اینا استفاده کنم
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-khtml-background-size: cover;
background-size: cover;

[alismith]

سلام

فقط کافیه این کد ها رو به استایل مربوط به عنصر یا تگ مورد نظر اضافه کنید


موفق باشید