Responsive Padding with Background-Image

Question

I'm trying to make a full width and height responsive home page with an image. The problem I'm encountering are padding issues. I cannot get padding to work when I display an image in css under 'background-image: url();'. The only thing that works is the margin property but it is not responsive to the height and only shows the top and the rest as I scroll down but I am trying to have the padding be responsive to the resizing of the height of the page. To show you guys more of what I am trying to achieve, I included 2 examples, the top with what I want and the second with the problem I'm facing. I've managed to get responsive padding to work while I place the img tag in my HTML but I cannot do so with the background-image property as I'm trying to put text on it.

  .test img{ width: 100%; max-width: 100%; height: 100vh; padding: 10px; } .wrapper { background-image: url(https://images4.alphacoders.com/432/43258.jpg); height: 100vh; width: 100%; max-width: 100%; background-size: cover; background-position: center center; } 

 <div class="test"> <img src="https://images4.alphacoders.com/432/43258.jpg" alt=""> </div> <div class="main"> <div class="wrapper"></div> </div> 

https://jsfiddle.net/u9t4hqqq/

Answer 1

Padding does work, but you can't see it. If you put content within the div, you'd see the effects of any padding. What you want is to apply the padding to the parent, in this case .main . Padding by definition can not impact the background of the element it's applied to but rather where children sit in relation to the element's borders.

If that is somehow insufficient, you can simulate the look with box-sizing: border-box and use a 10px border that matches the body background.

Which raises the point that you may want to review the box model to learn better what margin and padding are and how they relate to elements:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model

Answer 2

madrougebeauty.com uses a "frame" that is layed on top of all elements; it has nothing to do with padding.

To achieve something like it, look at the following:

 .wrapper { background-image: url(https://images4.alphacoders.com/432/43258.jpg); background-size: cover; background-position: center center; height: auto; min-height: 100vh; color: #fff; box-sizing: border-box; /* Give your content padding so nothing gets hidden under the frame */ padding: 2em; } .frame { position: fixed; z-index: 9999; background-color: yellow; } .top, .bottom { width: 100%; height: 10px; left: 0; } .left, .right { width: 10px; height: 100vh; top: 0; } .top { top: 0; } .right { right: 0; left: auto; } .bottom { bottom: 0; top: auto; } .left { left: 0; } 

 <!-- These 4 elements build a frame on top of the screen --> <div class="frame top"></div> <div class="frame right"></div> <div class="frame bottom"></div> <div class="frame left"></div> <div class="wrapper"> <h1>Headline</h1> <p>Your content here.</p> </div> 

Answer 3

You can use margin , you just need to account for the vertical margin that will push your 100vh height out of 100vh, and you can do that with calc()

 body {margin:0;} div { margin: 10px; background: url('http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg') center top no-repeat / cover; height: calc(100vh - 20px); } 

 <div></div> 

Or you can wrap the element in another element, apply padding to the outer element, and use border-box to keep the padding inside of 100vh.

 body {margin:0;} section { height: 100vh; box-sizing: border-box; padding: 10px; } div { background: url('http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg') center top no-repeat / cover; height: 100%; } 

 <section><div></div></section>