0

a part of of the border

I want to make a border around my div that is transparent. I want the background image to show through the transparent border. In my picture, you can see that my code makes a transparent border, but the white shows through instead of the background image. No matter what size I make the border, it basically increases the white space to fit the border.

The following is my code that includes the border of .mainbody and the background image. I'm thinking that maybe, something my code is interfering with the border transparency over the background image. 

.mainbody {
    max-width: 1500px;
    height: auto;
    background: white;
    margin-top: -27px;
    border: 10px dashed rgba(236, 200, 236, .5);
    }

body {
    background: url("https://scenesfromphiladelphia.files.wordpress.com/2010/02/026.jpg");
    background-size: cover;
    background-position: center;
    text-align: left;
    text-indent: 50px;
    color: 000000;
    font-family: Bree Serif;
    max-width: 800px;
    margin: auto;
}
cphil
  • 163
  • 2
  • 2
  • 8

1 Answers1

0

Maybe it helps you

* {
    box-sizing: border-box;
}
.mainbody {
    position: relative;
    max-width: 1500px;
    height: auto;
    padding: 10px;
}
.other {
    border: 10px dashed rgba(236, 200, 236, .5);
    position: absolute;
    background: transparent;
    opacity: .5;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

body {
    background: url("https://scenesfromphiladelphia.files.wordpress.com/2010/02/026.jpg");
    background-size: cover;
    background-position: center;
    text-align: left;
    text-indent: 50px;
    color: 000000;
    font-family: Bree Serif;
    max-width: 800px;
    margin: auto;
}

And the HTML:

<body>
  <div class="mainbody">Hello<div class="other"></div></div>
</body>
fcastillo
  • 938
  • 1
  • 11
  • 24