在手機上覆蓋背景大小

我的網站有問題。這張照片在桌面上看起來不錯，但在我的手機上看起來很糟糕，因爲它放大了。在手機上覆蓋背景大小

我該如何解決這個問題？它鴕鳥政策工作，

background-size:cover;

與背景的DIV有兩個類

.content{ 
    color: white; 
    font-family: "Another Typewriter"; 
    width:100%; height:1000px; 
    font-size: 300%; 
    padding-left: 15%; 
    padding-right: 15%; 
    padding-top: 10%; 
    text-align: center; 
    background-size: cover; 
} 

.parallax{ 
    height: 100%; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 
#xyz{background-image: url(URLtoimage);}

的div容器：

<div id="xyz" class="parallax content"> 
    <legend class="text-center content-headline">XYZ</legend> 
Some text 
    </div>

來源

2017-04-23 theunbreakable21

你有更多的代碼，如HTML和CSS您使用??? –

您是否包含[視口元標記]（https://www.w3schools.com/css/css_rwd_viewport.asp）？例如：' –

我是怎樣假設你是使用background-attachment: fixed;，它不能在許多移動瀏覽器上工作，您必須使用媒體查詢在小屏幕上滾動更改它。

.parallax{ 
    height: 100%; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

@media screen and (max-width: 600px) { 
    .parallax { 
     background-attachment: scroll; 
    } 
}

來源

2017-04-23 18:30:26 vlk

感謝您的幫助，但它不是加工。我編輯我的文章，並添加了div的類。 – theunbreakable21

您是否嘗試過使用前綴？ – vlk

是的，但它也不能工作 – theunbreakable21

也許你可以將其更改爲背景大小：含有當屏幕寬度小於767px時

來源

2017-04-23 18:25:55

使用@media顯示不同的圖像和較小的屏幕寬度 – Bindrid

use background-size：100％100％;檢查片段視圖。

body{ 
 
margin:0; 
 
} 
 
.bg-img { 
 
    background: url('http://www.planwallpaper.com/static/images/6942095-abstract-background-wallpaper.jpg') no-repeat center; 
 
    background-size: 100% 100%; 
 
    min-height: 100vh; 
 
    width: 100%; 
 
}

<div class="bg-img"> 
 

 
</div>

來源

2017-04-23 18:42:07

感謝您的幫助，但它不起作用。 – theunbreakable21

那麼你有一些其他問題。如果可能的話，添加html部分和背景圖片。因爲你的內容和視差類沒有任何背景源。 –

好吧，我添加了html – theunbreakable21

在手機上覆蓋背景大小

回答

相關問題