[英]CSS Image Doesn't Cover Screen
I have a website where I have an image that I would like to cover my entire screen width wise. 我有一个网站,在该网站上我想要覆盖整个屏幕宽度。
Here is my css: 这是我的CSS:
.header {
background-image:url('images/header.png');
height: 120px;
width: 100%;
position: absolute;
left: 0;
z-index:1;
}
My bug is that, if I resize the browser window so it has a scroll bar and I scroll to the right my image stops drawing after a certain point. 我的错误是,如果我调整浏览器窗口的大小,使其具有滚动条,然后向右滚动,则图像将在特定点后停止绘制。 It seems that the image is drawing 100% width of window but it doesn't apply if some of the window is not visible, and only is via using the scroll bar.
看起来图像正在绘制100%的窗口宽度,但是如果某些窗口不可见,则该图像不适用,仅通过使用滚动条即可。
How do I fix this? 我该如何解决? Here is a picture of my problem:
这是我的问题的图片:
Edge of screen before scrolling right: 向右滚动之前的屏幕边缘:
Edge of screen after scrolling: 滚动后的屏幕边缘:
Use background-size:cover;
使用
background-size:cover;
and background-repeat:no-repeat;
和
background-repeat:no-repeat;
.header {
background-image:url('images/header.png');
background-size:cover;
background-repeat:no-repeat;
height: 120px;
width: 100%;
position: absolute;
left: 0;
z-index:1;
}
Currently, you are not telling the background image to 'stretch' so it stays fixed in it's original dimensions. 当前,您没有告诉背景图片“拉伸”,因此它在其原始尺寸中保持不变。
You also have ANOTHER problem - your html css property is not set to width:100%; 您还有另一个问题-您的HTML CSS属性未设置为width:100%; your bootstrap.css is overriding it.
您的bootstrap.css会覆盖它。 Therefore, your header element stretches to 100% of html element, which is not 100% of the screen's width.
因此,您的标头元素延伸到html元素的100%,而不是屏幕宽度的100%。
Find your local css and add (or edit) the current html & body rules: 找到您的本地CSS并添加(或编辑)当前的html和body规则:
html,body {
width:100%;
margin:0;
padding:0;
}
Make sure it is loaded AFTER the bootstrap css (and therefore overrides bootstrap.css). 确保它在bootstrap css之后加载(因此覆盖了bootstrap.css)。
If it still makes problems, try using 如果仍然出现问题,请尝试使用
width:100% !important;
Just for general knowledge, I recommend using your browsers' built in inspector tool (or FireBug) to see the element on the screen and what's their dynamic css values. 仅出于一般常识,我建议您使用浏览器的内置检查器工具(或FireBug)来查看屏幕上的元素以及它们的动态css值是多少。
Hope this helps! 希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.