背景图片问题

我收到此问题。此外，我的所有网页都有背景，我只想在家中使用它。然而，在其他页面上，它显示为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

背景图片问题

回答

相关问题