There is a background inside the div. Then I would write a list of links, which then pass over the background image, but it not seems to work.
If the link is located above the background mage, hovering the mouse on that, I do not get the underline of the text as for all other links that are not above the image background.
This is my code:
<div style="min-height:200px;">
<div class="backgroundImg"
style="background: url(/my/url.png) no-repeat; height:140px; width: 140px;position: absolute;>
</div>
<div style="z-index:30">
My link here
</div>
</div>
Sorry for my English, the concept is really easy to understand but hard to explain ... I hope to be able to explain.
Thanks to all, Danilo
Edit:
I found the error ... if you do not use "absolute" propriety in both div, z-index non work.
Thanks for the suggestions! ;-)
Hard to understand, but I'll try:
1) If you have a link above the div with background, try with a different value of z-index on the link or setting a paddin on the link, so the div goes down and you'll see the underline.
2) If you want to have a list over the image background, insert it IN the div with background.
I found the error ... if you do not use "absolute" propriety in both div, z-index non work.
Thanks for the suggestions! ;-)
Related
There is my code :
<div class='f-left vignetteFamille box-sizing'>
<div class='relative contenuVignetteFamille box-sizing' style='z-index:1;'>
<br/><br/><br/><br/>
<img class='absolute' src='./charte/famille/fondBasGaucheVignetteFamille' style='bottom:-21px;left:-4px;z-index:0;'>
</div>
</div>
I want my div contenuVignetteFamille hover the image but this doesn't work and I don't know why
EDIT:
there is my css but I don't know if will help you :
.vignetteFamille{background-image:url('./charte/famille/fondVignetteFamille.png'); background-repeat:no-repeat;background-position:bottom right;margin-right:16px;width:201px;margin-top:2px;padding-bottom:19px;padding-right:19px;}
.contenuVignetteFamille{width:100%;border:solid 4px #FFC600;}
I'm not sure if I understood your question correctly but I'm assuming you want to highlight the image when hovering the div contenuVignetteFamille?
This can be solved by adding css to the child when hovering the parent, like this:
.contenuVignetteFamille:hover img {
opacity: 0.5;
}
See my fiddle here.
On another note, don't use br tags to get some height on your div, add a height value instead. I've also moved your inline styling to the external one.
I put a Div box in a table cell that should slide up once its hovered over. When I hover over it, it doesn't do anything. I have tried the code below without success.
I also tried the Javascript way which didn't work either.
<td>
Product 1
<div id="p1" class="bottombox"></div></td>
.bodytable td #p1{
bottom:-10px;
}
.bodytable td #p1:hover{
bottom:-130px;
width: 50%
}
Hovering is actually working. Try to give background color to the div and you will see it.
Also if you haven't specified div position as absolute than bottom property will not work like this. Perhaps you wanted to have margin-bottom or padding-bottom?
EXAMPLE HERE
you can´t see what happens on hover because your p1 class is empty.
Try:
<div id="p1" class="bottombox">Product 1</div>
Is this what you're looking for? It uses the height property. http://jsfiddle.net/vBdne/
If you want the hidden to stick, you're gonna want to use javascript.
How to give alt and title for background image? Is it possible?
<div id="cont"></div>
#cont
{
background:#FFF url(../images/post.png) no-repeat;
}
You cannot give an alt and title for a css background, but you can give a title to the div.
<div id="cont" title="Title!"></div>
The title will popup upon mouse-idle over the div element.
No, because a background image is only a decorative element which should not have any semantic meaning. HTML is for semantics and meaning, CSS is just for visual appearances. If the image is so important that it should have a fallback alt text, make it an HTML <img> element.
it's simple to give a title tag to the div itself.
about the alt, if you desperately need it, the main road to go would be to put an img in the div with height="100%" and width="100%", or, if this gets in your way, add an 1px img in the div, with the alt, but it won't be seen. zindex may also help if the img is getting in your way and oclude other elements.
good luck,
alex
Yes, sometimes background images have meaning, and semantics can be applied to them.
Example scenario: If the content above the fold has 3 or 4 images, then combining those into a single sprite is optimal.
Having images as a sprite forces them to behave like a background image, but they still look like standard images on the front end, so they should have semantics applied to them.
Here's how to do it:
<div class="img_shell">
<div class="background-img" role="img" aria-label="Alt text here"></div>
</div>
Basically the role="img" should only be applied on an empty div tag.
Ref: If your background image is being applied to the main div wrapper then there is another workaround in this article: https://www.davidmacd.com/blog/alternate-text-for-css-background-images.html
Yes this is possible within PHP like this..
if($moon==0)
{$icon_moon="background: url(mp0.png); background-repeat: no-repeat;
background-size: 15px 15px; background-position: right top";
$title_mph = "Moon phase new";}
In this case the variable ($icon_moon) is inserted in a table for positioning like this
Adding an Alt text is also possible this way.
I have a button that, when hovered over, I would like the background image to display also. (It is an arrow an explanation of the button). There are quite a few questions similar, but I couldn't quite tweak the answers to work for me.
The HTML looks like
<div id="header_feedback">
<a href="#contactForm">
<img title="Add an Event" src="./img/header_feedback.png" alt="Give us your Feedback"/>
</a>
</div>
the CSS then is
#header_feedback
{margin-left:730px;
margin-top:-135px;
position:absolute;}
#header_feedback:hover
{
background: url ('./img/addevent_tip.png');
}
Any ideas hugely welcome!
The main problem here is not with your CSS. Itagi's answer correctly identified the minor issue that you can't have a space between url and the parens/address.
But there are two other bigger issues:
Invalid image url: when applied, background: url('./img/addevent_tip.png'); fails to find a valid image. To fix this, you either need two periods or zero. So either background: url('/img/addevent_tip.png'); or background: url('../img/addevent_tip.png');
Backgrounds applied to opaque images aren't visible: Since the entire content of the div is an image and that image has no transparency, you will not be able to see the on-hover change even when it happens correctly. You can adjust for this by making part of the image transparent (and, perhaps, setting a background for the non-hover state that leads it to look the way it normally does), or by abandoning the image in favor of CSS spriting.
you just need to change it the following way:
#header_feedback:hover
{
background: url('./img/addevent_tip.png');
}
no whitespace between 'url' and the actual url
#header_feedback a img{ display:none;}
#header_feedback a:hover img{display:block}
I'd like to add a hyperlink to this background image. Should I create a new class within the stylesheet? (When I attempted to call the new class, the image disappeared).
body{
background-image:url('http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
line-height:20px; font-size:14px;
font-family:"Trebuchet MS";
margin:0
}
EDIT: Now there's whitespace on the top and bottom (created by the new div class?)
You're using a background-image on the body tag. Assigning a hyperlink to it is impossible.
Also, whats stopping you from using it in an img tag? This seems like a semantically valid thing to do:
<img src="http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg" alt="Image" />
But, if you must use it as a background image, than creating an additional class is the way to go.
You can place a div behind everything on the page, give it a background image, and then add an onclick handler to that div. But you can't hyperlink a background image.
You'd have to do something like:
<body>
<div id='background' onclick='window.location.href="mynewurl"'>
<!-- Rest of page goes here -->
</div>
</body>
Also, add cursor: pointer to the css for the background div so people know it's a link.
OK, I can't tell you if this would be a valid solution, because I would have to see what you actually wanted to be a link. If for example you wanted to make a link to the cream "Boundless" boxes in your background image I do have a work around. It will be a pain to get it correct cross browser, but it's doable.
Make clear gif's the same size as your cream boxes
Put those images in something like this <img src="blank.gif" alt="Link Location" />
Use CSS to make the a tag a block element and place it over the cream boxes in the background image
I would of course clean up my code, it's a mess, but I am sure you can figure that out. Just make sure to have descriptive alt tags for accessibility.
This isn't the best solution, that would be to take the "boundless" boxes out of the background image and place them instead of the blank gifs, but if you HAVE to do it for one reason or another, this option will work.
You're going to have to change your html code a bit to do that. You need to surround the image with a tag, but you can't do that to the <body> tag, obviously.
** EDIT ** Since it's been pointed out my first answer is invalid HTML (thanks, and sorry), you can use a jquery approach like this:
$(document).ready(function(){
$("body").click(function(){
window.location='http://www.yoururl.com';
});
});
The issue with setting up an onClick method, is that you remove the anchor hint at the bottom left of the browser window, as well as any SEO that might be associated with the link.
You can accomplish this with just HTML/CSS:
<style>
.background-div {
background-image:url("/path/to/image.jpg");
position:relative;
}
.href:after {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
}
</style>
<body>
<div class="background-div">
</div>
</body>
In this case, the relative positioning on background-div will keep the link contained to only that div, and by adding a pseudo element to the link, you have the freedom to still add text to the link (if necessary), while expanding the click radius to the entire background div.