CSS: Colored div with transparent box

Question

Is there any way to have a div with a background-color that takes up 100% width and a transparent box inside it that shows the original background?

Answer 1

Solution 1: Clip-path

Clip path can be quite useful, as it keeps the code clean and simple. However, it does not have great support (yet) in browsers, and should hence only be used in test environments.

html {
  background: url("http://butlers-web.co.uk/Content/Images/BWLOGO.png") 100% 100%;
}
div {
  height: 300px;
  width: 100%;
  background: tomato;
  position: relative;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0, 50% 0, 50% 20%, 80% 20%, 80% 80%, 20% 80%, 20% 20%, 50% 20%, 50% 0);
}

<div>

</div>

Solution 2: Box shadow Trick

The box shadow trick uses a pseudo element and overflow:hidden; to create the box shadow/colouring of the element.

html {
  background: url("http://butlers-web.co.uk/Content/Images/BWLOGO.png") 100% 100%;
}
div {
  height: 300px;
  width: 100%;
overflow:hidden;
  position: relative;
}
div:before{
  content:"";
  position:absolute;
  top:20%;width:60%;height:60%;left:20%;
  box-shadow:0 0 0 999px tomato;
  }

<div></div>

Solution 3: Gradients

You could use multiple gradient background, however this may or may not be suitable as gradients don't always turn out rendered very nicely:

html {
   background: url("http://butlers-web.co.uk/Content/Images/BWLOGO.png") 100% 100%;
 }
 div {
   position: relative;
   height: 300px;
   width: 100%;
   background: linear-gradient(tomato, tomato), linear-gradient(tomato, tomato), linear-gradient(tomato, tomato), linear-gradient(tomato, tomato);
   background-size: 100% 20%, 20% 100%, 100% 20%, 20% 100%;
   background-position: left bottom, right bottom, left top, left top;
   background-repeat: no-repeat;
 }

<div></div>

Solution 4: Borders

Whilst this may or may not be suitable for you, there is still a chance that it may help, so will post here anyway:

html {
   background: url("http://butlers-web.co.uk/Content/Images/BWLOGO.png") 100% 100%;
 }
 div {
   position: relative;
   height: 300px;
   width: 100%;
   box-sizing: border-box;
   border-left: 20vw solid tomato;
   border-right: 20vw solid tomato;
   border-top: 50px solid tomato;
   border-bottom: 50px solid tomato;
 }

<div></div>

Solution 5: Background attachment

I have recently come across the background-attachment property, so am still coming to grips with it. However, if you wished the background to appear behind you may be able to alter the below snippet to your needs:

body {
  background: url('http://butlers-web.co.uk/Content/Images/BWLOGO.png');
  background-attachment: fixed;
}
.wrapper {
  width: 100%;
  height: 300px;
  background: tomato;
  position: relative;
}
.inner {
  width: 80%;
  height: 80%;
  background: url('http://butlers-web.co.uk/Content/Images/BWLOGO.png');
  background-attachment: fixed;
  position: absolute;
  top: 10%;
  left: 10%;
  box-sizing:border-box;
  border:2px solid black;
}

<div class="wrapper">
  <div class="inner"></div>
</div>

Answer 2

You're going to need two div for that. A parent, with the red background, then the inner div.

give the inner div margin: 10px auto; as a start.