• 1 رای - 5 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
عکس بک گراند رسانسیو نمی شود
#1
سلام
فوتر سایت بک گراند قرار دادم که سایز ارتفاعش 400 پیکسل هست. وقتی کد زیرو استفاده میکنم طول عکس در موبایل خیلی خوب نشون داده میشه. اما داخل لپ تاپ ارتفاع عکس کامل نمایش داده نمیشه!
height نوشتم داخل سی اس اس مشکلش برای لپ تاپ حل شد اما داخل موبایل طولش درست نمایش داده نمیشه Angry
لطفا بگین چکارش باید بکنم ؟

کد:
#sp-footer {    background-image: url("/helix/images/footer.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: inherit;
    background-position: 50% 50%;
    height: 400px;
    width: 100%;
}
  پاسخ
تشکر شده توسط :
#2
کد پی‌اچ‌پی:
backgroundurl(/helix/images/footer.jpgno-repeat center center fixed
  -
webkit-background-sizecover;
  -
moz-background-sizecover;
  -
o-background-sizecover;
  
background-sizecover;
  
  
height:100
  پاسخ
تشکر شده توسط : a76205
#3
با این کد هم نشد!!
بنظرتون برای هر رسولیشن @media بنویسم بهتر نیست ؟
از فریم ورک Helix داخل جوملا استفاده میکنم و بوت استراپه. اما نمیدونم چرا همچین چیزی رو ساپورت نمیکنه و موقع کوچک شدن مشکل داره
  پاسخ
تشکر شده توسط :
#4
اره چرا که نه اونم یه راه حل هستش دیگه امتحان کنید ببینید ج میده یا نهExclamation
  پاسخ
تشکر شده توسط :
#5
میدونید هدفم اینه بدون استفاده از @media به جواب برسم
چرا تا وقتی Height تعیین نمیکنم عکس داخل هر رزولیشنی خودشو تعییر میده اما بعد از تعیین ارتفاع از کار میوفته!
  پاسخ
تشکر شده توسط :
#6
چون توی بوت استرپ ما فقط با عرض باکس سرو گار داریم و خود بوت استرپ اومده با مدیا کوئری ها در همه اندازه ها عرض رو برحسب درصد تعیین کرده و مقدار ارتفاع هم معمولا در بوت استرپ auto هست تا برحسب سایز ارتفاع هم تغییر کنه
حالا شما اگه نیاز دارید که ارتفاع تعیین کنید اول اینکه از درصد استفاده کنید دوم اینکه باید در اندازه های خاص ارتفاع تعیین کنید تا به مشکل برنخورید
  پاسخ
تشکر شده توسط :
#7
آقا فرشاد پس راه دیگه ای نیست ؟
همیشه برام سوال بود چون بعضی سایت ها اینجور نیستن! نمیخوام آماتورانه آمادش کنم. وسواس پیدا کردمHuh
  پاسخ
تشکر شده توسط :
#8
به مثال زیر دقت کن
کد پی‌اچ‌پی:
<!DOCTYPE html>
<
html lang="en">
    <
head>
        <
meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!-- 
ALL STYLESHEET -->
        <
link href="bootstrap/css/bootstrap-rtl.min.css" rel="stylesheet">
        <
link href="css/font-awesome.min.css" rel="stylesheet">
        <
style>
        .
sp-footer
        
{
            
background-imageurl("images/blog-details.jpg");
            
background-repeatno-repeat;
            
background-sizecover;
            
background-positioncenter;
            
width100%;

        }
        .
size-footer
        
{
            
height100%;
            
positionabsolute;
            
background-colorantiquewhite;
        }

        </
style>
    </
head>   
    <
body>
    <
div class="container-fluid">
        <
div class="row">
            <
div class="sp-footer size-footer col-md-12"></div>
        </
div>
    </
div>
    </
body>
</
html
میتونی سایز عکس رو هم contain بکنی و بعد نتیجرو توی کدهات ببینی
  پاسخ
تشکر شده توسط :


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان