在移动设备上使用wordpress的问题

时间:2015-08-08 11:02:11

标签: android html css wordpress

我在移动设备上显示我的第一个网站时遇到了一些麻烦。当设备是垂直的时,网站背景图像不适合我尝试使用background-size:100%100%规则的整个屏幕,但也不起作用。这是我现在的css:

background-attachment: scroll;
background-image: url("http://qubik-design.co.nf/wp-content/uploads/2015/07/rsz_intro-bg4.jpg");
background-position: left top;
background-repeat: no-repeat;
background-size: 100% auto;

最后一个麻烦是页脚。即使在某些PC上,它也不会粘在屏幕的底部。这是css:

<footer id="colophon" class="site-footer" role="contentinfo">

#colophon {
    background: #000 none repeat scroll 0 0;
    color: #ffffff;
    opacity: 0.8;
    padding: 20px;
}

我尝试使用底部:0px但不起作用,这就是全部。

提前致谢。

1 个答案:

答案 0 :(得分:0)

要使背景图片填满整个屏幕,您可以使用background-size: cover。你还需要让身体保持100%的高度。

body.custom-background {
    background-image: url('http://qubik-design.co.nf/wp-content/uploads/2015/07/rsz_intro-bg4.jpg');
    background-size: cover;
    height: 100vh;
}

然而,对于当前的背景图像,它看起来并不正确。您可能想要制作这2张图片。

对于页脚,假设它仅适用于此站点并且您不会更改高度,或者您可以相应地更改CSS,您可以将页面ID设置为屏幕高度的100%并添加底部填充至少与页脚一样高。

#page {
    position: relative;
    z-index: 999;
    margin: auto;
    min-height: 100vh;
    padding-bottom: 250px;
}

然后你可以给colofon一个绝对的定位。

#colophon {
    background: #000;
    opacity: 0.8;
    color: #ffffff;
    padding: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}