Welcome to WebmasterWorld Guest from 54.198.147.221

Forum Moderators: not2easy

Message Too Old, No Replies

All content is behind background image

problem placing content above image background

     
11:44 am on Mar 6, 2014 (gmt 0)

New User

joined:Mar 6, 2014
posts: 1
votes: 0


Hello dear forum members,

I hope you can help me with the following problem.

I have an image gallery that i would like to place above my background image. For some reason my gallery is placed behind the background image and i have no idea how to get it in front of it.

My html code is as follow:

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="EX.css" />
<link rel="stylesheet" type="text/css" href="jquery.jscrollpane.css" media="all" />
<!--
1 ) Reference to the files containing the JavaScript and CSS.
These files must be located on your server.
-->

<script type="text/javascript" src="./Highslide JS_files/highslide-full.js"></script>
<!--[if lt IE 7]>

<![endif]-->



<!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
-->

<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.outlineType = 'rounded-white';
hs.dragByHeading = false;
hs.lang.restoreTitle = 'Click for next image';
hs.restoreCursor = null;

// Close button
hs.registerOverlay({
html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
position: 'top right',
fade: 2
});

// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
return hs.next();
};

// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
slideshowGroup: ['group1', 'group2', 'group3', 'group4'],
interval: 5000,
repeat: false,
useControls: true,
fixedControls: 'fit',
overlayOptions: {
className: 'controls-in-heading',
position: 'bottom right',
opacity: 1,
hideOnMouseOut: false,
offsetY: 50,
offsetX: -5
},
thumbstrip: {
position: 'bottom',
mode: 'horizontal',
relativeTo: 'expander',
width: '490px',
offsetY: 60,
zIndex: 5
}
});

// Options for first gallery
var firstGalleryOptions = {
slideshowGroup: 'group1',
thumbnailId: 'thumb1',
useBox: true,
width: 550,
height: 413,
dimmingOpacity: 0.5,
headingId: 'firstGalleryHeading',
headingOverlay: {position: 'rightpanel', fade: false, width: '350px'},
captionId: 'firstGalleryCaption',
captionOverlay: {fade: false},
wrapperClassName: 'wide-border rightpanel'
};

// Options for second gallery
var secondGalleryOptions = {
slideshowGroup: 'group2',
thumbnailId: 'thumb2',
useBox: true,
width: 550,
height: 413,
dimmingOpacity: 0.5,
headingId: 'secondGalleryHeading',
headingOverlay: {position: 'rightpanel', fade: false, width: '350px'},
captionId: 'secondGalleryCaption',
captionOverlay: {fade: false},
wrapperClassName: 'wide-border rightpanel'
};

// Options for first gallery
var thirdGalleryOptions = {
slideshowGroup: 'group3',
thumbnailId: 'thumb3',
useBox: true,
width: 550,
height: 413,
dimmingOpacity: 0.5,
headingId: 'thirdGalleryHeading',
headingOverlay: {position: 'rightpanel', fade: false, width: '350px'},
captionId: 'thirdGalleryCaption',
captionOverlay: {fade: false},
wrapperClassName: 'wide-border rightpanel'
};

// Options for single images
var singleImage = {
slideshowGroup: 'single',
wrapperClassName: 'wide-border',
dimmingOpacity: 0.5
}

// Dynamic dimmer zIndex mod:
hs.dim = function(exp) {
if (!hs.dimmer) {
hs.dimmer = hs.createElement ('div',
{
className: 'highslide-dimming highslide-viewport-size',
owner: '',
onclick: function() {
if (hs.fireEvent(hs, 'onDimmerClick')) hs.close();
}
}, {
visibility: 'visible',
opacity: 0
}, hs.container, true);
}
hs.dimmer.style.zIndex = exp.wrapper.style.zIndex - 2;
hs.dimmer.style.display = '';
hs.dimmer.owner += '|'+ exp.key;
if (hs.geckoMac && hs.dimmingGeckoFix)
hs.setStyles(hs.dimmer, {
background: 'url('+ hs.graphicsDir + 'geckodimmer.png)',
opacity: 1
});
else
hs.animate(hs.dimmer, { opacity: exp.dimmingOpacity }, hs.dimmingDuration);
};
</script>

<style type="text/css">
.highslide-caption {margin-top: 60px; width: 550px;}
.highslide-heading {font-weight: normal; margin: 0 10px;}
.highslide-heading a {color: red; font-weight: bold;}
.highslide-controls {
width: 60px !important;
}
.highslide-controls .highslide-move {
display: none;
}
.highslide-controls .highslide-full-expand {
display: none;
}
.highslide-controls .highslide-close {
display: none;
}
.rightpanel .closebutton {left: 365px;}
z-index: 2;
</style>
</head>
<body>
<div id="background">
<div id="bg">
</div>

<a class="highslide" id="thumb1" href="http://www.roadrash.no/hs-support/images/015.large.jpg"
title="" onclick="return hs.expand(this, firstGalleryOptions)">

<img src="./Highslide JS_files/015.thumb.jpg" alt=""></a>


<!-- First gallery -->
<!--
3) Put the thumbnails inside a div for styling
-->

<div class="highslide-galleryH">
<h3>First gallery</h3>

&nbsp;

</div>

</body>
</html>


and my css is:

 html {
height: 100%;
}

body {
margin: 0;
padding: 0;
background-color:#393939;
background-image:url('images/Background.png');
}

#background
{
left: 0px;
top: 0px;
position: relative;
margin-left: auto;
margin-right: auto;
width: 1020px;
height: 1030px;
overflow: hidden;
z-index:0;
}

#bg
{
left: 0px;
top: -14px;
position: absolute;
width: 1020px;
height: 1080px;
overflow: hidden;
background-image:url('images/bg.png');
z-index:0;


}

.highslide-galleryH{
float: left;
width: 600px;
margin: -550px -550px 15px 15px;
z-index: 2;
}


any help wil be very much appreciated
1:03 pm on Mar 6, 2014 (gmt 0)

Junior Member

5+ Year Member

joined:June 6, 2012
posts: 104
votes: 0


z-index only works on positioned elements. Try adding absolute, relative or fixed to the div that contains your gallery.
10:29 pm on Mar 6, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:13834
votes: 484


Sometimes less is more. See what happens if you omit all mention of z-index everywhere. Simply call your background a background and your foreground a, er, nothing. By default, anything in a child element will display on top of anything in a parent.
2:39 pm on Mar 19, 2014 (gmt 0)

New User

joined:Mar 18, 2014
posts:1
votes: 0


In my expirience I added position(absolutem,relative,fixed) then added z-index to the div.

I would suggest using google chromes element inspection tool or firebug on firefox.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members