添加背景“条”以颜色扩展标题图像。或将图像放在div条上 [英] add background "bars" to extend header image with color. or put image over div bars
问题描述
我基本上为我的网站做了一个标题图像,它的两边都有黑色。我想扩展标题,以便它的用户的web浏览器的宽度与黑色酒吧,如果标题扩展其整个浏览器。
我已经尝试过几件事,但我无法想象出来。
我现在有:
#header {
background:url('img / header.png')no-repeat顶部中心;
height:131px;
}
#headerbg {
height:131px;
width:4000px;
background-color:#000;
}
在html中,我只是在div中, html。
以下是 jsFiddle ,它显示如何对两个div进行分层,并使用 background-size
属性展开图片,使其与背景颜色的宽度。更新:上面的新的jsFiddle被替换为包括更好的方法为这种类型的外观。
编辑:这是一个不同的 jsFiddle 将图片放置在其中央,允许来自父容器的任何多余的背景颜色显示
编辑2:使用上面的编辑小提琴,您可以应用CSS3 / IE渐变效果,如 jsFiddle 状态:解决方案是将中心中心
用于 background-position
并同时设置宽度和高度
至 100%
。
I basically made a header image for my site and the sides of it have black on it. I want to extend the header so it goes for the width of the user's web browser with black "bars" as if the header extends for their whole browser.
I've tried a few things, but I cant figure this out.
Here's an example of what I have now:
#header {
background: url('img/header.png') no-repeat top center;
height: 131px;
}
#headerbg {
height: 131px;
width:4000px;
background-color:#000;
}
And in the html I just have both in divs and within each other in the html.
Here's a jsFiddle that shows you how to layer the two div's and use background-size
property to expand the image so it fits just the same as the background color's width. UPDATE: New jsFiddle above is replaced to include better method for that type of look.
Edit: Here is a different jsFiddle that has places the image inside and centers it, allowing any excess background color from the parent container to show through.
Edit 2: Using the Edit fiddle above, you can apply CSS3/IE gradient effect as shown in this jsFiddle
Status: The solution was to use center center
for background-position
combined with setting both width and height
to 100%
for the image used.
这篇关于添加背景“条”以颜色扩展标题图像。或将图像放在div条上的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!