背景只有视口一样宽 [英] background is only as wide as viewport

问题描述

恼人的问题

当我放大我的视口窗口（发生在firefox，chrome），然后水平向右滚动，我的背景图片被剪辑

图片最好地描述了发生了什么：

放大 b
$ b

- 图片只有视口宽度

缩小退出 - 不会发生问题

这里有一些从我的CSS可能是相关的部分：

  article，aside，details，figcaption，figure，
 footer，header，hgroup，menu，nav，section { 
 display：block; 
} 
 body {width：100％; } 
 header＃header {width：100％; } 
 header＃header＃background-image {
 height：150px; 
 background：url（/images/header/silhouette.png）repeat-x; 
} 
  

这种情况发生在没有应用cssgradients的情况下 -

解决方案

解决方法是在body上设置min-width：

  body {width：100％; min-width：1002px; }这修复了所有浏览器的问题，我有和iphone一样（根据 
 http://iphonetester.com/\"> iphonetester 虽然我意识到，最好现在添加一些媒体查询，真正给手持用户提供最好的解决方案
 
Annoying problem

When I zoom-in on my viewport window (happens in firefox, chrome) and then scroll horizontally to the right, my background images are clipped

the images best depicts what's happening:

zoom in

 - image is only as wide as viewport

zoom way out - problem doesn't occur



Here are some sections from my css which might be relevant:
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body{ width: 100%; }
header#header { width: 100%; }
header#header #background-image {
  height: 150px;
  background: url(/images/header/silhouette.png) repeat-x;
} 
This happens with and without cssgradients applied too - really stumped here
解决方案
The fix for this is to set min-width on the body:
body{ width:100%;min-width: 1002px; }
This fixes problem on all browsers that I have as well as iphone (according to iphonetester although I realise it's probably best to add some media queries now to really give the best solution to handheld users

                        
这篇关于背景只有视口一样宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！