Search code examples
htmlcssbackgrounddivider

HTML/CSS Image Divider/Seperator Overlay/Methods?

I have messed around with CSS examples and HTML enough to create a sleek (in my opinion) website. I have two background images of CSS (section)'s, they both call on elements in my styles.css file to color their background to black and white. However, I want to have an image divider between these two sections.

I looked at articles like Using an image as a separator in HTML and CSS that did not help me.

I have tried the <> method and yielded no results, I tried the "div class" method, and my image showed up! However, it is covered up/overlayed by my two other backgrounds/sections.

How do I put my image so that it is smack middle of the seperation of background colours in my two sections, and how do I make it so my it overlays my two sections/backgrounds?

Let me draw in ASCII art what I would want it to be like..

WWWWWWWWWWW <-- white background / CSS section

WWWWWWWWWWW

OOOOOOOOOOO <-- divider image, smack center, overlaying both

BBBBBBBBBBB

BBBBBBBBBBB <-- black background / CSS section

Thank you, and if I need to further clarify my question, I would be happy to!

Here is my code for my styles.css 

.Halloweeny {
        height:100px;
        width: 100 % ;
        background: url('/images/halloween.png');
        background-position: 50% 50%;
        z-index: 99;
}

Here is my code from my index.php 

....

</section>

<div class="Halloweeny"></div>

        <!-- Image section -->
        <section class="image-section red" id="image-section">

.....

As you can see, it is between two sections.

Solution

  • Neither of your answers got me to do it right, however, Joel Bonet Rodriguez helped me out the most with his snippet of code.

    I asked around, and came up with the answer from a buddy of mine, who made a JSFiddle for me to copy from.

    https://jsfiddle.net/s7sLujgc/2/

     /*   Here is my final code, that works. */

    CSS:

    .Halloweeny:before {
        content: "";
        position: relative;
        top: -79.5px;
        display: block;
        height:185px;
        width: 120 % ;
         background: url('/images/halloween.png') center center;
        -webkit-background-size: cover;  /* <--                        */
         -moz-background-size: cover;   /* <-- I'm not sure these do  */
         -o-background-size: cover;    /* <-- anything at all        */
    }

    HTML:

    <section class="image-section red back Halloweeny" id="image section">

    It seems I just needed to add my Halloweeny to the second section, and add a :before tag to it, and add it in block and a top and a content and all that.

    Thanks to all those who helped, +1 Joel, and thanks most to my buddy who helped me out! :)