-4

I'm using wordpress with a custom template and I want to display a div the width of the window. This is my html code:

<section id="calltoaction" class="calltoaction " style="background-position: 50% 15px;">
    <div class="blacklayer"></div>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <h2>Title Text</h2>
                    <p>Test Text</p>
                </div>
                <div class="col-md-12 text-center">
                <a href="#" class="btn btn-danger btn-lg btn-primary">Download</a>
                </div>
             </div>
        </div>
</section>

This is my css code:

.calltoaction {
  background-position: unset !important;
    position: absolute;
    left: 0;
    right: 0;
        background-image: url(http://roguelevels.com/wp-content/uploads/2018/04/DSC6507-683x1024.jpg);
      background-size: cover;
    padding: 80px 0 90px 0;
}

The problem is, everything I create gets placed within this div class:

.row {
    margin-right: -15px;
    margin-left: -15px;
}

So i'm trying to write custom css to create a div that displays over the top of this class as I don't have access to the template's code directly.

At the moment the result is this. I want that image to fit the width of the page.

Any help would be greatly appreciated.

Steven Ford
  • 43
  • 7
  • Possible duplicate of [How to overlay one div over another div](https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div) – Reyedy Apr 24 '18 at 11:53
  • 2
    Welcome to Stack Overflow! Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a **Stack Snippet**. Although you have provided a link, if it was to become invalid, your question would be of no value to other future SO users with the same problem. See [**Something in my website doesn't work can I just paste a link**](http://meta.stackoverflow.com/questions/254428/something-in-my-web-site-or-project-doesnt-work-can-i-just-paste-a-link-to-it). – Paulie_D Apr 24 '18 at 11:58
  • You haven't set a z-index - have a read: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index – Pete Apr 24 '18 at 12:05
  • Related though - https://stackoverflow.com/questions/28565976/css-how-to-overflow-from-div-to-full-width-of-screen – Paulie_D Apr 24 '18 at 12:11

1 Answers1

-1

See attached code-snippet for how to stack divs ontop of each other, assuming one div has setting: position: absolute; . I moved the lowest div slightly so it is visible.

.div-1 {
  position: absolute;
  z-index: 1;
  background-color: red;
  height: 100px;
  width: 100px;
  margin: 10px 0px 0px 10px;
}

.div-2 {
  position: relative;
  z-index: 2;
  background-color: green;
  height: 100px;
  width: 100px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <link rel="stylesheet" href="index.css">
  <body>

<div class="div-1"></div>
<div class="div-2"></div>

  </body>
</html>
Toolbox
  • 2,333
  • 12
  • 26