添加背景“条”以颜色扩展标题图像。或将图像放在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屋！