EDIT: background-position does change the position of the background image. I realized the actual problem I am facing is something else, which can be seen on this thread:
Background image disappears when changing its background-position?
Okay so I have a set of links (a href's) inside an unordered list, and when the user hovers over them, I want a black background image to show up on top of the link and change the links color to black. I already have the background image which shows up photoshoped. Here is what I did so far
li:hover {
color: white;
background: url(../images/liHover.png);
}
Now, the problem is that the image doesn't show where I want it to show. I want the link to be in the center of the image. The image is like 3 pixels below where I actually want it to be. It is the same for which ever link I hover over, the image is always 3 pixels below where I want it to be. Is there a way to change the position of the image which shows up and a way to move that image a few pixels above where it is normally supposed to be? (even if we cannot do this with CSS, if someone can write a Javascript function which can get this accomplished, that would be great).
The list is just
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
i think this is what you mean:
li:hover {
color: white;
background: url(../images/liHover.png) no-repeat center center;
}
if it doesn't center the way you want, play with the center center values which are x / y (horizontal / vertical). they can be also px,em or % values.
Related
I currently have it to where the current link is "underlined", but the underline is an image as I wanted it to look Android-style. The image looks like this when the web page is loaded on a normal desktop pc:
The image itself is a simple image with the top 90% transparent and the bottom 1/8th of it blue. Whenever the web page is loaded on a phone, it turns into this:
The css for it is this:
#currentlink
{
background-image:url('../images/menu-underline.png');
background-position:center;
}
With this html:
<div id="menu">
<ul id="menulinks">
<li>About me</li>
<li><a id="currentlink" href="">Apps & Projects</a></li>
<li>Work with Me</li>
</ul>
<hr>
I have also tried making the image simply just the blue line, and changing the css to have background-position:bottom but it made the whole entire box blue.
Why not just use the border-bottom property?
#currentlink {
border-bottom: 5px solid #35B5E5; /* this is your blue color */
}
The problem is on a phone your li's are adjusting, and the image isnt scaling proportionally.
This should resolve your issue:
#currentlink {
background-image:url('../images/menu-underline.png') no-repeat center center fixed;
}
The problem is your background image repeated itself, for the Android Device, in which you viewing the WebPage, either you can fire media queries for the same to adjust the background image for specific resolution only.
As #natewiley suggested I'd recommend doing such simple styling with CSS only, so your client doesn't have to download extra assets (images). But in your particular case, since on a phone the size of the list items changes and thus causing the background image to shift position.
You can try setting background-repeat: no-repeat to prevent the background image from repeating itself to fill the space, so you should at least see just one blue line instead of two. Though you'll need to adjust where the blue line should be.
I am guessing no, but it would be really sweet to be able to set the z-index of the cursor with CSS or Javascript.
Let's say you've got some buttons and you want to add a semi-transparent image on top of the buttons for effect. Or in my current case, some SVG paths that have hover and click actions. If I could set the button or SVG z-index to 0, my cursor's z-index to 1 and the image overlays z-index to 2, that would be pretty sweet! The mouse would be going under the overlay and still be able to click on the buttons. It would be even more spectacular to set the visual z-index (which layer the cursor appears to be), separate from the effective z-index (which layer the cursor actually is). So the cursor could appear to be on top of the overlay, but still be able to click on the buttons underneath.
I have my doubts, but I thought I would check if anyone has heard of someone doing this or something like it.
Since no answer has been accepted, I want offer the right answer.
The pointer-events: none is the solution.
See simple CSS example:
.emotion_message {
pointer-events: none;
background-color: rgb(144,238,144,0.5);
height: 20%;
width: 94%;
position: absolute;
top: 40%;
color: darkgreen;
padding: 1%;
text-align: center;
border-radius: 10px;
margin-left:3%;
margin-right:3%;
}
In this example, I wanted to display a chart, with a static summary box over the top, but I wanted the cursor to interact with the chart underneath. I also added opacity to the background-color, so the user can both see and interact with the submerged element (in this case the chart). Now the user sees the box, but the cursor does not.
Thanks #FabricioMatte for this answer in the comments.
You can play with the cursor:none;
See a related Q: Is it possible to put the mouse cursor behind an element or does the mouse cursor have an z-index?
There is no such thing as a cursor z-index.. what you can do is have a jQuery hover function that gets the object that the cursor is hovering over, which in return allows you to find the objects z-index. So really instead of wanting a cursor to have z-indexes, just have hover states.
Then have custom cursors depending on location. Which as everyone is saying cursor:none would be fun to play with for this. Say you want to go under a alpha block, you could just render a cursor under that alpha block to get the effect of the cursor being under it.
I'm working on a web app where I have an image, and, for lack of a better word, a "view" of that image which is a box limiting what you can see to whatever part of the image is inside the box. The view can be adjusted by dragging the edges around, and the image is stays. However, I also want to be able to drag both the view and the image around together.
The best analogy I can think of is the Snipping Tool in Windows that you use to capture a portion of your screen.
I've tried a div with a background image, but that always resizes the image to fit the div. Right now I'm trying to have a div that contains an img, and setting the div to have overflow:hidden, but that makes the image stick to the upper left corner of the div.
Help? Thanks in advance!
Sounds like you want something that masks the image and only shows a segment.
Assuming a structure like.
<div class="img-mask">
<img>
</div>
You can set the styles of the mask to be overflow hidden with a width and a height (this creates the mask). Then position the image relatively, left and top till it's where you want it to be.
.img-mask {
overflow: hidden;
height: 200px;
width: 200px;
}
.img-mask img {
position: relative;
top: -25%;
left: -25%;
}
This should center the image to the mask.
I think there's a CSS property cut out for exactly this task: the clip attribute.
Here's the W3schools tutorial: http://www.w3schools.com/cssref/pr_pos_clip.asp. Click the Try it Yourself button to get a hands-on idea.
With this the CSS property applies only on the image and you do not need an additional masking div.
I need to slide a background when clicking the "next" arrow, and the "previous" arrow - right now the background is in the #container element - However, that doesnt work - I've tried putting the background on the ul#slider element - But that doesnt work either...
What i need is that the background will be slider as much as the liinside the slider...
Any suggestions on how to do that ?
You can see the project here: http://www.i-creative.dk/Slider/
thx
I've built something like what you're asking for, and it's a total pain.
The problem is, you're talking about having a different background image, the size of the page, for EVERY slide.
2 options are:
1: Have one BIG background image, with all the background aligned horizontally, and animate the css background-position when you change a div, to keep things matching. This ahs the advanatage that only one image needs to be downloaded, but it will be big.
Problems are: you see all the other images if you jump multiple steps at once;
it requires that you use a fixed width;
it's a pain if you want to change the background for just one slide;
Preload the background for the next slide on a div which is a sibling of container but has a higher z-index. Use jquery to slide this over the existing background, from the appropriate side.
The good thing about this method is that you can use css to make the background image always take up the full-width of the screen, or use a bigger imager and have it centred. See here: http://cksk.com for an example.
Long story short, you won't get this working with an off-the-shelf solution, you'll need to get your hands dirty.
Also, you'll need to spend a hell of a lot of time on optimisation.
Try this css...
#slider {
width: 472px; /* divided the width of the background image by 4 (# of panels) */
height: 570px;
list-style: none;
/* start background after the initial cloned panel: 472px to match panel width */
background: transparent url(../images/background.png) 472px 0 repeat-x;
}
/* This makes sure the last cloned panel background matches the first panel */
ul#slider li.clone {
background: transparent url(../images/background.png) 0 0 repeat-x !important;
}
/* Make the background visible */
div.anythingSlider .anythingWindow {
overflow: visible !important;
}
The only problem is that the width of the UL is limited, so when you get to the last panel, the background ends, but reappears once you hit the right arrow.
Ok so let me explain. Lets say there is a small image and when you hover over it, there will be a new and much larger image (an enlarge version of the image). Thats easy, but wait! I want the larger image to be right on top of the smaller image and when you hover out of the smaller image, the div goes away. The problem is that when you display the larger image on top of the smaller image, the mouse is hovering over the larger image and not the smaller image. I want to make it so that the mouse stays hovering on the small image while having the larger image on top if it. And when you hover out of the smaller image the larger image disappears. The key is having the larger image on top of the smaller one (covering it up), but having the mouse under the larger image. Cant figure this out! Thanks guys
No, the mouse is always on top. But, you can accomplish the functionality you want - to hide the larger image when the mouse leaves the smaller image. There's more than one way to do it, for sure. Here's the approach I'd take.
HTML:
<div class="imgHover"></div> <!-- This div is the element that is hovered -->
<img class="large" src="largerImg.jpg" />
<img class="small" src="smallerImg.jpg" />
CSS:
.small, .imgHover
{
height: 55px; /* Set the div's size to match the smaller image */
width: 80px;
}
.imgHover, .large
{
position: absolute;
}
.large
{
display: none;
z-index: 2;
}
.imgHover:hover + .large /* this bit is the important part */
{
display: block;
}
.imgHover
{
z-index: 3;
}
If you want to do it with JavaScript instead of pure CSS, that's ok. Set it up with the same css, but use div.imgHover to attach your mouse events.
The solution would be to handle hover on the larger image but in the handler have the larger image go away when the pointer's x and y positions leave the boundaries of the smaller image.
Sounds like your problem is because with the .hover() because you have the new div opening over the old one it causes the .hover() to fire the mouseOut function. The best solution is to add to the .hover() so the mouseEnter also includes the larger image that "grows" out of the smaller image.
something like
$("#small_image, #large_image").hover(function (){...},function() {...});