Brian Breeden Brian Breeden - 1 month ago 12
CSS Question

How can I apply min-width on div background?



<div style="background: url(http://netdna.webdesignerdepot.com/uploads/2013/11/picjumbo.com_IMG_3130.jpg) no-repeat center center;
background-size: 100%; min-width: 700px; height: 100%; width: auto;">

<p>
I DO NOT WANT THIS CONTENT TO BE AFFECTED BY THE MIN-WIDTH. I just want the background to take on min-width. I hope that makes sense.</p>

</div>





Here is my Fiddle:

https://jsfiddle.net/y0bdLgzL/2/


  • I am applying the styling in-line because for this particular project I need to be able to dynamically generate the background image based on a database.

  • I am trying to get the background to take on a min-width property, but not the content/text.



Any help on how to properly arrange divs and classes to help make this happen would be very helpful.

Answer

Since you can't give a background image a min-width, you could use a pseudo element, like this.

Updated fiddle

.bkg {
  position: relative;
  height: 100%;
  width: auto;
}
.bkg::before {
  content: '';
  position: absolute;
  background: url(http://netdna.webdesignerdepot.com/uploads/2013/11/picjumbo.com_IMG_3130.jpg) no-repeat center center;
  left: 0;
  top: 0;
  width: 100%;
  min-width: 700px;
  height: 100%;
}
.bkg p {
  position: relative;
}
  <div class="bkg">

    <p>
      I DO NOT WANT THIS CONTENT TO BE AFFECTED BY THE MIN-WIDTH. I just want the background to take on min-width, not the content. I hope that makes sense.</p>

  </div>