Can Background Image Extend Beyond Div's Borders

Can background image extend beyond div's borders?

No, a background can't go beyond the edge of an element.

The overflow style controls how the element reacts when the content is larger than the specified size of the element.

However, a floating element inside the div can extent outside the div, and that element could have a background. The usefulness of that is limited, though, as IE7 and earlier has a bug that causes the div to grow instead of letting the floating element show outside it.

Place background image outside border of containing div

You're going to have to put the background image inside a separate element. Background image positions cannot place the image outside the element they're applied to.

edit your question jogged my memory and I went and checked the CSS specs. There is in fact a "background-attachment" CSS attribute you can set, which anchors the background to the viewport instead of the element. However, it's buggy or broken in IE, which is why I've got it sitting on the "do not use" shelf in my head :-)

edit — Note that this answer is from 2010, and newer (and, more importantly, widely-supported) CSS capabilities exist in 2016.

css enlarge background image beyond div size

May be simply background-size: contain; ?

#wd2{width:100%;height:200px;
    background:url(http://placekitten.com/98/48)  no-repeat fixed;
    background-size: contain;
}

fiddle

Posibilities that you have:

contain will adjust the size of the image so it is the biggest size posibility without gettin cut. This means tha you see all the image, but will likely leave blanks in one direction or the other

cover will adjust the image to do not leave any blank space. but will cut some part of the image, and more will be cut as bigger is the difference in aspect ratio between the image and the container div.

In your website, I would use

background-size: cover;
background-position: center; 

but that is a personal decision: play with it. (or you can make the div higher, so the aspect ratio is more similar to the image)

extend background outside of grid foundation

This can be achieved with a pseufo-element as follows:

Codepen Demo

Basic HTML structure

<div class="container">
  <div class="level"></div>
  <div class="level">
    <div class="split"></div>
    <div class="split purple"></div> /* div to be extended */
  </div>
  <div class="level"></div>
</div>

CSS

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html, body {
    overflow-x: hidden;
}
.container {
  width:960px;
  margin: 0  auto;

}
.level {
  height:100px;
  background: #bada55;
  clear:both;
  border:1px solid black;
}

.split {
  width:50%;
  height:100%;
  float:left;
}

.purple {
  position: relative;
  background: #663399;
  opacity:0.5; /* just for visibility of effect */
}

.purple:after {
  content: "";
  position: absolute;
  background: #663399;  /* Match the background */
  top: 0;
  bottom: 0;
  width: 9999px;   /* some huge width */
} 

.purple:after {
  left: 100%;
}

CSS: Image appears outside div borders

If you use flex instead of float the div will stay in the same size as the image.

  <div style="padding: 20px;">
  <div style="border: solid black 2px; display:flex">
    <img width="100px" height="150px" src="https://karateinthewoodlands.com/wp-content/uploads/2017/09/default-user-image.png">
    <div>
      <p>Username</p>
      <p>User Role</p>
    </div>
  </div>
</div>

How do I make a HTML background image extend its width outside of the parent DIV

The short answer is that you can't. Background images will always be contained within it's parent element. What you could try doing is instead of using the image as a background on your parent element, you could drop it into it's own element and bring that element outside of the container.

For instance:

<div class="container">
    <div class="headerImage">
        <ul class="navigation">
            <li><a href="">Link One</a></li>
            <li><a href="">Link Two</a></li>
        </ul>
    </div>
    <div class="otherContent"></div>
</div>

And then in your CSS:

.container {
    position: static; // This allows the image to break outside of it's container.
    margin: 0 auto;
    width: 960px;
}

.headerImage {
    background: url(yourImage.png) center top no-repeat transparent;
    display: block;
    position: absolute; // This breaks it out of the normal document flow.
    top: 0; left: 0;
    width: 100%; // This will expand to fill the width of the window.
    height: 65px; // Or whatever height you want.
    z-index: 10; // Play with this number for layering.
}

Good luck with your project.

Make an image come out of a div with background-image

You could use an additional absolutely positioned element to which you assign the repeated background pattern and which you put behind the original element by using z-index: -1:

html, body {margin: 0;}.background-oficina {  position: relative;  border: 1px solid #333;  border-bottom: none;}
.bg-container {  position: absolute;  z-index: -1;  left: 0;  top;  width: 100%;  height: 120px;  /* or whatever height is desired */  background: url("http://placehold.it/20x15/cff");}
.text-center {  text-align: center;}
.logo {  padding-top: 50px;  margin: 0 auto;}

<div class="background-oficina">  <div class="bg-container"></div>  <div class="container">    <div class="col-xs-12 text-center">      <img class="logo" src="http://placehold.it/200x150/fb7" alt="Oficina de Redação">    </div>  </div></div>

Extend background-color of header beyond container with css

You can use the :before pseudo element with absolute positioning and negative z-index to extend the background color of a contained div the entire way to the edge of the page.

#container {    width: 100px;    margin: 0 auto;    background-color: #FFFFCC;}.stripe {    background-color:#CCFFFF;    height: 100px;    position: relative;}.stripe:before {    content:"";    background-color:#CCFFFF;    position: absolute;    height: 100%;    width: 4000px;    left: -2000px;    z-index: -1;}

<div id="container">  <div>one</div>  <div class="stripe">two</div>  <div>three</div></div>

How to get a background picture going outside max-width div

YOUR SOLUTION

If the browser support of background-size property is good enough for you, you can use background-size: cover;. Check here or here to see browser support.

Here is the code snippet to show how it works. Be sure to position your background-image to center center if you want it to always be centered.

.container {  width: 100%;  max-width: 300px;  margin: 0 auto;}.line {  border-bottom: 1px solid black;}.logotest {  background-color: #03b9e5;  height: 50px;}.navtest {  background-color: #e4ed00;  height: 25px;}.socialtest {  background-color: #ab801a;  height: 25px;}.main {  height: 250px;  background: url(http://lorempixel.com/250/250) no-repeat center center;  background-size: cover; /* This does the magic */}.container:after {  clear: both;  content: ".";  display: block;  height: 0;  visibility: hidden;}

<body>  <div class="container" id="first">    <div class="logotest">    </div>    <div class="socialtest">    </div>    <div class="navtest">    </div>  </div>  <div class="line"></div>

  <div class="main" id="second">    <div class="container">Put your content in here.</div>  </div>  <div class="line"></div>  <div class="container">    <div id="third">    </div>  </div>  <div class="line"></div></body>

---

Related Topics