背景圖片問題

我收到此問題。此外，我的所有網頁都有背景，我只想在家中使用它。然而，在其他頁面上，它顯示爲header下的橫幅。背景圖片問題

enter image description here

我不能得到的圖像上的jsfiddle工作，但這裏是link

此外，我怎麼能擺脫滾動條？

<title>title</title> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 

<script> 

    $(document).delegate('#Home', 'pageshow', function() { 
    var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - $(this).find('[data-role="footer"]').height()); 
    $(this).height($(window).height()).find('[data-role="content"]').height(the_height); 
    }); 
</script> 
<script> 

function limitTextCount(limitField_id, limitCount_id, limitNum) 
    { 
     var limitField = document.getElementById(limitField_id); 
     var limitCount = document.getElementById(limitCount_id); 
     var fieldLEN = limitField.value.length; 

     if (fieldLEN > limitNum) 
      { 
       limitField.value = limitField.value.substring(0, limitNum); 
      } 
     else 
      { 
       limitCount.innerHTML = (limitNum - fieldLEN) + ' character(s) left..'; 
      } 
    } 

</script> 


<style type="text/css"> 
.ui-content { 
overflow:hidden; 
background: transparent url(landscape.jpg); 
background-size :cover; 
color:#FFFFFF; 
text-shadow:1px 1px 1px #000000; 
} 

.ui-page { 
background: transparent; 
} 
</style>

#textarea-sendEmail 
    { 

    resize:none; 
    height:150px; 
    min-height:150px; 
    max-height:150px; 
    }

<div data-role="header" data-position="fixed" > 
    <h1 style="text-align:left; margin-left:40px;">Home</h1> 
    <a href="#bars" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">Bars</a> 
</div><!-- /header --> 

<div data-role="content" id="Home"> 
    <p>Home.</p> 
</div><!-- /content --> 

<div data-role="footer" data-position="fixed"> 
    <h4>Page Footer</h4> 
</div><!-- /footer --> 

<div data-role="panel" id="bars" data-theme="b" > 
    <!-- panel content goes here --> 
    <ul data-role="listview" > 
     <li data-icon="home"><a href="#Home">Home</a></li> 
     <li data-icon="clock"><a href="#Tee Times">Tee Times</a></li> 
     <li data-icon="shop"><a href="#Rates">Rates</a></li> 
     <li data-icon="action"><a href="#Scorecard">Scorecard</a></li> 
     <li data-icon="info"><a href="#Contact Us">Contact Us</a></li> 
    </ul> 
</div><!-- /panel -->

來源

2015-06-05 Justin

向我們展示CSS/HTML/JS，也保留在一個問題上。 – Drops

我將jsfiddle與代碼鏈接起來。此外，這些問題應該是相關的，因爲我唯一一次得到滾動條是我試圖獲取圖像的主頁。 – Justin

我的不好，很抱歉的伴侶。 – Drops

JQM設置在頁面加載約230px頁的最小高度，使背景犯規填充整個頁面

所以你需要窗口的實際高度，並設置爲最小。您可能需要調整總窗口高度的負120像素，但在演示中看起來不錯

由於使用所有頁面使用的.ui-content類，因此背景會顯示在所有頁面上。使用#home ID代替它的內容只有

var wh = $(window).height() - 120 
$(".ui-content").css("min-height", wh+"px"); 

window.onresize = function(event) { 
var wh = $(window).height() - 120 
$(".ui-content").css("min-height", wh+"px"); 
};

演示

http://jsfiddle.net/wqL5yw1q/

也Theres這種方法

https://jqmtricks.wordpress.com/2014/12/01/content-div-height-css-solution/

來源

2015-06-05 16:33:37 Tasos

你知道我的主頁爲什麼會出現滾動條嗎？ – Justin

@Justin - 它最初沒有。正如我在頁面加載中的回答中所提到的，實際內容minheight大約爲230像素，所以如果沒有代碼設置min高度到窗口高度，它會像這樣 - http://jsfiddle.net/y50ej7se/ – Tasos

爲了擺脫滾動條，你需要把overflow:hidden;上<html>。

來源

2015-06-05 13:37:06 DNA

這並沒有改變任何東西。 – Justin

背景圖片問題

回答

相關問題