رفتن به مطلب

اختصاصی قرار دادن یک تصویر پس زمینه تمام عرض CSS


Mohsen_Nirouzad

پست های پیشنهاد شده

شاید شما هم در تم های مختلف که بسیار زیبا طراحی شدند دیده باشید که یک تصویر به صورت تمام عرض ( Full-Width ) قرار داده شده.

امروز میخوام براتون بگم که چطور میتونید این کار رو بکنید.

میتونید از این کد CSS استفاده کنید:

 

html { background: url(images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}

 

 

نکته: به جای images/bg.jpg باید آدرس عکستون رو جایگزین کنید.

همچنین برای اینکه مرورگر Internet Explorer ( خدا لعنتش کنه دشمن طراحان وب عالمه ) میتونید کد زیر رو استفاده کنید. ( خودمم نمیدونم چی هست! خیلی عجیب غریبه کدش! )

 

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

 

توجه کنید که آدرس عکسها رو حتما جایگزین کنید.

ترجمه شده اختصاصی

 

 

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

ممنون ولی مرورگر دیگه لازم ندارند براشون -moz- , -ms- , -webkit- ,... نوشته بشه. همشون با حالت عادی کار می کنند

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

ممنون ولی مرورگر دیگه لازم ندارند براشون -moz- , -ms- , -webkit- ,... نوشته بشه. همشون با حالت عادی کار می کنند

به درسته که کار میکنن، اما دلیل نمیشه این ها رو ننویسیم،

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

در مورد اون کد دومی نظری ندارید؟ ماجراش چیه اصلا ما همچین چیزایی تو سی اس اس نداریم! این چطوریه؟

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

خیر هست. توی css حتی برنامه هم می نویسیم. دستورات شرطی هم وجود داره حتی.

اون کدا هم برای مایکروسافته که با سرکار اومدن edge دیگه نیازی به این کد نیست.

شما یه صفحه html ایجاد کنید که توش کدای Css با -webkit - ,... هستش بعدش بیاید valid کنید . میبیند که به عنوان خطای طراحی شناسایی می شوند

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر

بایگانی شده

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

مهمان
این موضوع برای عدم ارسال قفل گردیده است.
×
×
  • اضافه کردن...