[英]Wordpress : Make a background image responsive
Here's my wordpress : http://shopmanouchek.com 这是我的wordpress: http : //shopmanouchek.com
Everything is ok if you look at it in desktop mode but there's a problem in smartphone mode. 如果你在桌面模式下查看它,一切都很好,但在智能手机模式下有问题。 The header image is not responsive.
标题图像没有响应。
Here's the code for the logo : 这是徽标的代码:
#header{
background-image: url(http://img15.hostingpics.net/pics/989373manouchekc.png);
background-repeat: no-repeat;
background-position: center;
}
I tried to add 我试着补充一下
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
It looks ok on my phone but now the logo in the desktop view is now completely oversized 它在我的手机上看起来不错,但现在桌面视图中的徽标现在已经完全超大了
Salman A above already mentioned media queries, here's a brief overview http://css-tricks.com/css-media-queries/ Salman A上面已经提到过媒体查询,这里有一个简短的概述http://css-tricks.com/css-media-queries/
and an example of how that would work in practice 以及如何在实践中发挥作用的一个例子
#header {
background-image: url(http://img15.hostingpics.net/pics/989373manouchekc.png);
background-repeat: no-repeat;
background-position: center;
}
@media all and (max-width: 480px) /*or whatever width you want the change to take place at*/ {
#header {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.