Using Raphaël—JavaScript Library at This Demo I am trying to draw on the top of Two divs (#layer1 and #layer2) which they have image background. But As you can see the drawing object (Red Circle) is sitting at the back of other images (The reason of that is visible is using PNG image for layers).
Can you please let me know how I can reorder them and change the zindex of the elements to ring the drawing object to the first on the top?
#layer1 {
top:0px;
position:absolute;
width:794px;
height:680px;
background-image: url('http://i1275.photobucket.com/albums/y443/Behseini/che2_zps88cdd50e.png');
background-repeat: no-repeat;
z-index:100;
}
#layer2 {
top:0px;
position:absolute;
width:794px;
height:680px;
background-image: url('http://i1275.photobucket.com/albums/y443/Behseini/che_zps3fa0eafd.png');
background-repeat: no-repeat;
z-index:10;
}
#canvas {
z-index:500;
}
There's a couple of bits to possibly change... fiddle here
For the z-index to take effect, you need to add
position: absolute;
to the css for that element;
I've also put the background-color onto the first divs style, so it doesn't hide the other picture, or you could possibly add opacity to that or something instead.
Related
I am trying to integrate a hover effect to an img in css but the problem occurs when I hover it, the hover area is misplaced and the the hover effect occur even when the mouse is not over the img.
<body>
<div id='backgroundContainer'>
<div id='background31'></div>
</div>
</body>
CSS:
html, body {
max-height:100%;
width: 300%;
background: url('background.png');
top: 0;
left: 0;
background-size: cover;
background-repeat:no-repeat;
}
#backgroundContainer {
top:0;
left:0;
margin:0;
padding:0;
height:100%;
width:100%;
}
#background31 {
top:45%;
position: absolute;
margin:0;
padding:0;
background: url('alure.png');
background-repeat:no-repeat;
height:55%;
width:70%;
left:230%;
background-size: 5%;
}
#background31:hover{
background-size: 7%;
}
I was thinking about using background-position:x% y% or margin-left to simplify the code but it did not work what I tried.
You are applying the hover effect on an div which is set to a large area (the area in red in my fiddle below). This is why the hover is activated even when the mouse is not over the image.
If you add an image to the nested div, and apply the hover effect to this image it should work.
<div id='backgroundContainer'>
<div id='background31'>
<img src='http://www.sjiep.nl/images/sjiep.gif' id='testImage'>
</div>
</div>
and the css
#testImage{
width: 100px
}
#testImage:hover{
width: 150px;
}
See also: http://jsfiddle.net/2CbTX/1/
Update
Added a link to the image, see: http://jsfiddle.net/2CbTX/2/
because you have put the hover for the div the whole div , not just the image and this div background31 occupies the lower right corner square of your window .
see here : http://jsfiddle.net/Pda5e/
your image size becomes very small as compared to the div in which it is in. Since you have made it 5% of the div.
Resize the div to make it smaller and increase the background size to fill the div
so if you have to make the hover only affect the image, you must give the hover to image only.
like here : http://jsfiddle.net/Pda5e/1/
Try replacing this code
#background31{
background: url(maxresdefault.jpg);
background-repeat:no-repeat;
height:50px;
width:100px;
background-color:#066;
background-size: 5%;
}
#background31:hover{
background-size: 100%;
}
The hover effect occurs not over the image because you only change background-size, but not the size of #background31 element, it always remains width:70%.
So you should use background-size: 100% and change the width of the background31 element.
#background31 {
background-size: 100%;
width: 5%
}
#background31:hover{
width: 2%;
}
But background-size is not supported in IE8. If you want IE8 suuport than use <img> element instead of a div.
I am looking for some help. I have built a site where I want to have a patterned background image (works fine) but, I want to have a border image on top of the background image across the top.
I have tried using position: absolute and setting the z-index on each element but each time it cuts the background image in half and doesn't overlay at all.
Help!
Here's the code I have so far. I am new to coding so excuse any poor code!
body {
color:#787371;
background:url(images/line-top.png) repeat-x top;
position: absolute;
z-index: 1;
}
#bodychild {
background:url(images/bg-body.jpg);
border:0;
position: absolute;
z-index: 10;
}
use multiple backgrounds:
body {
background:
url(http://subtlepatterns.com/patterns/dark_fish_skin.png) center top repeat-x,
url(http://subtlepatterns.com/patterns/food.png) center top repeat;
}
more info: http://css-tricks.com/stacking-order-of-multiple-backgrounds/
I'm setting a map up for when you hover the little orange circles, a fish will come up.
Example can been seen here, http://www.simagine.nl/kaartje
However, if you hover the far right circle, little above Australia, the hover itselfs keeps flickering and therefor the image keeps flickering also.
The CSS for this is:
a.tonijn {
position:absolute;
text-indent:-9999px;
height:10px;
width:10px;
top:156px;
left:355px;
display:block;
}
a.tonijn:hover {
background:url(tonijn.png) no-repeat;
height:83px;
width:106px;
top:65px;
left:329px;
}
Think it's a silly answer but i can't find it...
Regards
The rules in a.tonijn:hover changes the area for the a element.
You need to add a child element to you a-tag and apply the background image to that element instead.
Try this:
Tonijn<span></span>
/* Selector changed */
a.tonijn:hover span {
background: url(tonijn.png) no-repeat;
height: 83px;
width: 106px;
top: -83px; /* Value changed */
left: -26px; /* Value changed */
position: absolute; /* Attribute added */
display: block; /* Attribute added */
}
When you hover you are changing the styles for the anchor tag. I would suggest creating a div that is set to 'visibility: hidden' then on a.tonijn:hover set that same div to 'visibility: visible'
Try giving a border to your link and see it's too small to be hovered, so increase the size, see the red border I have made, I just increased the height and width of your link like
height: 20px;
width: 20px;
And place it correctly around your orange circle in such a way that orange circle comes in the center of the box, and than you are good to go
As you can see here:
http://clients.noxxie.nl/rashosting/
I am using overlay in the image lighter black background.
but the text is also in overlay and that is not to happen.
Does anybody now how to fix it?
Your .text container has an opacity of 0.5 and is being inherited by its sibling content. You can fix it by using an rgba color on the container instead of opacity (though there is sparse support in IE (IE9 and above i believe) like so:
.text {
background-color: rgba(0, 0, 0, 0.5);
}
Or you can use a 1x1 semi-transparent png image as a background on that container. Another method would be to create an overlay div, absolutely positioned to cover the .text container with the opacity and a z-index low enough to stay behind everything else. Something like this:
HTML
<div class="overlay"> </div>
You can place the .overlay div inside of your .text container right at the bottom of the div.
CSS
.text {
position:relative;
z-index:10;
}
.overlay {
position:absolute;
top:0; right:0; bottom:0; left:0;
background-color:black;
opacity:0.5
z-index:1;
}
I'm trying to get a background tile for a certain position, like so:
I have the following CSS and dummy div under the body tag.
div#dummy {
position: absolute;
top: 200px;
bottom: 0;
left: 0;
right: 0;
background-image: url("data:image/png;base64....");
}
However this doesn't reach the bottom despite specifying bottom 0. Any ideas? I think I may be going about this the wrong way.
You might want to make sure you are including a reset.css http://meyerweb.com/eric/tools/css/reset/
You can then try setting the background property of the body itself, setting the position like so:
background: blue url('myimage.png') no-repeat left bottom;
The "blue" at the start specifies the colour of the top part of the image. The two properties at the end specify the background "position". Specifying bottom should make it glue to the bottom.
Then the height of the background image itself will determine how far up the tile it comes. You can use repeat-x instead of no-repeat if you want the background to tile horizontally..
One of many ways no doubt.
it should work-
html, body
{
margin:0;
padding:0;
width:100%;
height:100%;
}
#bluePart
{
height:30%;
width:100%;
background:#2A3BA6;
border:solid 0px #000000;
}
#lowerTilePart
{
height:70%;
width:100%;
background-image:url(images/bgImage.gif);
background-repeat:repeat;
border:solid 0px #FF0000;
}
the css style for html, body part is must.