我刚刚开始使用Wordpress Twenty-Twelve子主题进行前端开发。
我想让我的背景全屏响应。我从这篇文章开始关注:全屏响应背景图像,因为这正是我想要的。
但是当我把这个css代码复制粘贴到我的style.css:中时
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
它不起作用。感觉img.bg根本不存在。这是我目前的网站。
请帮忙!如果没有这个,我就无法继续前进,而且我落后于计划:(感谢您抽出时间!
有一种很好的css方法:
div
{
position: absolute; width: 100%; height: 100%;
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-size:cover;
}
关键是背景尺寸:封面;行-无论窗口大小如何,它都会调整大小。查看http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-大小&preval=覆盖
您需要2个使用jscript-instd。例如:
var theWindow = jQuery(window),
jQuerybg = jQuery("#bg"),
aspectRatio = jQuerybg.width() / jQuerybg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
jQuerybg
.removeClass()
.addClass('bgheight');
} else {
jQuerybg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");