Yo Bro Yo Bro - 1 year ago 134
CSS Question

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..

<-- white background / CSS section


<-- divider image, smack center, overlaying both


<-- 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 {
width: 100 % ;
background: url('/images/halloween.png');
background-position: 50% 50%;
z-index: 99;

Here is my code from my index.php



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

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


As you can see, it is between two sections.

Answer Source

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.


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


.Halloweeny:before {
        content: "";
        position: relative;
        top: -79.5px;
        display: block;
        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        */


<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! :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download