容器内需要图像以跨越页面的整个宽度，并且仍然充当内联块/块元素

Question

I am trying to have an image take the full width of the page while inside a div with a given width. I managed to do this by adding it as a background image and adding the following styles:

background-image: url(URL);
width: 100%;
height: 400px;
position: absolute;
left: 0;

However, the image is on top of all my other elements now, so I need to have the div display as a block or inline block element, but I'm not really sure the route to make this happen since when I apply those as styles nothing changes. Let me know if there is a good way to do what I'm trying to do. Thanks!

Here is a JSFiddle example of my problem: http://jsfiddle.net/T2t47/13/

Answer 1

Look like this might be what you're looking for http://jsfiddle.net/T2t47/12/

.introduction div {
    position:relative;
    height:200px;
    width:100%;
    background-position: center center;
    background-size:cover;
    left: 0;
    top:0;
    z-index: -999;
}

Answer 2

If I understand correctly you want the image to appear above the list in your example? If so, simply removing position: absolute; and left: 0; should keep the image filling the full width of the page and place it above the list. This is because position: absolute; takes the div out of the document flow.

So your style will be:

.introduction div {
    background-position: 0 -99px;
    width: 100%;
    background-size: 100% 500px;
    height: 200px;
}

http://jsfiddle.net/94Yvw/

Answer 3

So the reason your elements are falling beneath this element is because it taken out of the document flow. (As you may have read earlier.) Think of this as a box surrounded by pebbles. With the box in place, the pebbles sit finely around the box. However if we pull the box up, some of our pebbles fall beneath the box, and we can no longer see them. It's counted as what I like to call, a ghost element. It's undetected and untouchable by other elements.

(Sorry I know this is getting pretty winded.)

Essentially, what you're doing in your project is breaking it. If an element is 200 pixels wide, nothing inside of it should be more than 200 pixels wide.

Therefore the best workaround, i've provided in a JSFiddle shows you to set the parent element to no max-width. But to add container elements, inside of this container element wrapping the necessary elements, and to set their widths to whatever set width you need to.

.container{
  width: 100%;
}
.h1-container{
  width: 200px
}
.img-container{
  width: 100%;
}

This allows the image element room to breath, and other elements the containment they need.

Also, an excellent link on positions: http://css-tricks.com/absolute-relative-fixed-positioning-how-do-they-differ/

Answer 4

Is this your desired result?

.introduction div {
    background-position: 0 -99px;
    width: 100%;
    background-size: 100% 500px;
    height: 200px;
    position: absolute;
    left: 0;
    z-index: -5; /* now it is not on top of everything ! */
}

http://jsfiddle.net/T2t47/4/

Answer 5

it can be easily done with vw units and negative margin. And it's responsive friendly.

.full-width-block {
  width: 100vw;
  position: relative;
  left: 50%;  
  margin-left: -50vw;
}

See my fiddle: https://jsfiddle.net/ondrejruzicka/ghs6kmgw/