homepage Welcome to WebmasterWorld Guest from 54.211.180.175
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
All content is behind background image
problem placing content above image background
shalhevet




msg:4651725
 11:44 am on Mar 6, 2014 (gmt 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

 

brandozz




msg:4651745
 1:03 pm on Mar 6, 2014 (gmt 0)

z-index only works on positioned elements. Try adding absolute, relative or fixed to the div that contains your gallery.

lucy24




msg:4651852
 10:29 pm on Mar 6, 2014 (gmt 0)

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.

Kristaps62




msg:4655390
 2:39 pm on Mar 19, 2014 (gmt 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved