CODEWITHSUNDEEP
htmlcssbackground-image
Stefaan
Stefaan

Reputation: 182

Z-index of background image

On this site: http://www.effic.be/wordpress/

I have an arrow that points to the first widget on the homepage.

This is the code:

1. HTML

<div class="home-full">
    <div class="home-top">
        <div class="site-inner">
            <div class="wrap">
                <div class="home-bottom">
                    <section id="featured-page-advanced-2">Widget 1 content</section>
                    <section id="featured-page-advanced-3">Widget 2 content</section>
                    <section id="featured-page-advanced-4">Widget 3 content</section>
                </div>
            </div>
        </div>
    </div>
</div>

2. CSS

.home-full {
    background-image: url(/wordpress/wp-content/themes/enterprise-pro/images/arrow.png);
    background-position: 36% 47%;
    background-repeat: no-repeat;
}

.site-inner {
    position: relative;
    z-index: -999999;
}

.home-bottom {
    position: relative;
    z-index: 999999;
}

I need the arrow to display as it is now. It starts in the "home top" div and points to the "featured-page-advanced-2" section. That's why I added the "home full" div with the arrow background.

My problem: my widgets (titles and buttons) are no longer clickable. The z-index causes the "home-full" div to be in front.

Is there a way to resolve this? I spent all afternoon on it : )

Thank you! Stefaan

Upvotes: 0

Views: 599

Answers (3)

Muhammad Ameen Sheikh
Muhammad Ameen Sheikh

Reputation: 422

enter image description here

I was not able to make it through fiddle so I made these changes using firebug, this is the same as I mentioned above and the arrow is showing please go through it maybe u missed something out and please call me Ameen :)

Upvotes: 1

Muhammad Ameen Sheikh
Muhammad Ameen Sheikh

Reputation: 422

Instead of adding the arrow to the home-full div add the arrow to the "home-top widget-area" div using :before or :after and give position relative to this parent and remove the z-index : -9999px from the .site-inner div

home-top widget-area{
    position:relative
}

home-top.widget-area:after{
    position:absolute;
    bottom:0;
    left:55px;
    content:'';
    background:url("/wordpress/wp-content/themes/enterprise-pro/images/arrow.png") no-repeat;
    width:57px;
    height:101px;

    }

If the arrow is still hidden behind the lower div section trying increasing z-index in the :after css code

Upvotes: 1

Macks
Macks

Reputation: 431

Did you try this :

background-size : cover

The background-size property specifies the size of the background images. Syntax :

background-size: auto|length|cover|contain|initial|inheri

Doc : http://www.w3schools.com/cssref/css3_pr_background-size.asp

Upvotes: 0

Related Questions