There are some buttons on this page (the small icons toward the bottom) that I am using some css transitions to change the background of. But there is a flicker the first time the icons are hovered over! I've tried to implement the suggestions offered on this thread, but to no avail. Has anyone an idea on how I can make this work without the flicker?
Thank you so much!
Since no minimal testcase provided, I can suppose your images need to be preloaded, and transitions has nothing to do with the issue.
A background image can be preloaded by specifying it as background for normal (not hover) state of an element, and adding background-position with negative value so that background image is not visible in normal state.
For example:
/* Image is supposed to have height less than 100px here. */
A {
background: url(example.png) 0 -100px no-repeat;
}
A:hover {
background-position: 0 0;
}
By the way, it's established practice to put images for both states (normal and hover) to one physical image file, and then just change background-position on hovering:
/* "rollover-sprite.png" file contains images for both states side by side. */
A {
background: url(rollover-sprite.png) no-repeat;
}
/* Width of image for each state is supposed to be 100px here
(sprite will be ~200px wide). */
A:hover {
background-position: -100px 0;
}
You need to preload the image that you are switching to, the "flicker" is the short delay between you hovering and the image actually loading. There are lots of ways to do this, are you using jQuery?
Related
Hello I have a div with a background image on my website set up so when you hover over it, it changes background images.
It works correctly but the only issue is that there is a slight delay when switching images, probably a 0.2 second delay. So when you hover over it, the div turns blank for 0.2 seconds and then the new image appears.
Does anyone know what is causing this issue? I am thinking it has to do with the speed in which the hover image loads, if that is the case then there probably isn't a solution for this issue and I will just have to live with it.
There is no javascript or jQuery associated with the div at all.
Here is my code.
HTML:
<div class="video-button">
</div>
CSS:
.video-button {
background: url('images/playbutton.png') center center no-repeat;
height: 113px;
width: 113px;
}
.video-button:hover {
background: url('images/playbutton-h.png') center center no-repeat;
}
Load that second image in another div that is out side the screen view (not visible) .
Once that image is loaded browser won't need to call it again, it will use cache to show it on hover.
An image that I'm using for the background of a website is getting positioned to just the center of the page.
The screenshot for what I'm explaining is as follows:
Why is the black space on the right and left of the image present?
The CSS for the following is:
body {
background: black url('http://unsplash.s3.amazonaws.com/batch%209/johnny-lam-connect.jpg')no-repeat 50% 100%;
}
It would appear that your background image isn't big enough to cover the space of your window size. As a result, the black background color you're also providing is being seen on the areas where your image can't cover.
I'd be tempted to try the following:
body {
background-image: url('http://unsplash.s3.amazonaws.com/batch%209/johnny-lam-connect.jpg');
background-position: center;
background-size: cover;
}
This will ensure your background image covers the body of your HTML. More info can be found here.
First of all, it is black because in your CSS you specify black as the background colour. But im assuming you mean why is there any blank space at all...
In which case, the simple answer is the size of your image does not match the size of the window. More specifically, the resolution and therefore width to height ratio is not the same as the window. So the browser will center the image as per your css instructions and fill the rest of the space with your solid base colour (black).
You basically have 3 options here.
You find a background colour that is appropriate for the blank space to fit in with your design (a lot of people add a border or fade the image edges to transparent so it looks purposeful).
You use an image which is repeatable (this is the most common step as its usually advisable to use a very small repeatable image rather than a single large image. As an example, you might have a 2000px image gradient going from one colour to another that can be repeated (aka tiled) horizontally.
Use the background-size: cover property to fore the background image to fully cover your body tag. This property can be set to a number of options, but each one comes with its own caveats (i.e. weird stretching issues or cropping important parts on certain screens). So you need to google for the valid values and test each one. You will also have to download a shim/polyfill for this property to support old browsers (IE?).
It looks like the body is used to center the page. As the body is just as wide as the content, thats where the image ends. The root html element gets the background-color from the body, but not the image.
As a solution, you should consider adding a wrapping div to center the page, while setting the background on the body.
Example HTML
<html>
<body>
<div class="page"> ... </div>
</body>
</html>
Example CSS
html, body {
margin: 0;
padding: 0;
}
body {
background: black url(...) no-repeat center top;
}
.page {
width: 90%;
margin: 0 auto;
}
In your css use following property:
body {
background-size:cover;
}
or
body {
background-size:100%(for width) 100%(for height);
}
Hope it will help.
I have seen this so many times until now, but I never used myself. Can somebody explain how you can get specific icon picture from this single png image, for example the icons i selected with red ... using css
That is called CSS sprites. It is used to cut down the http requests. Basically all icons are placed on a single canvas and are used as background-image property and later they are mapped using CSS background-position property, so for example
.icon1 {
background-image: url('YOUR_URL_HERE');
background-position: 10px 10px; /* X and Y */
height: 30px;
width: 30px;
}
Demo
So inshort just define a fix height/width to your element, and than map the canvas using background-position property. Hence, if you have 100 small icon images on a page, it will make 100 requests to the server, thus to increase the performance, CSS Sprites are used.
Set a fixed (in pixels) height and width on an element
Set the image as the background-image
Adjust background-position so the part of the image you want to be visible is in view
Using background shorthand for the positioning of image.
div {
background:url(http://i.stack.imgur.com/mUhg1.png) -82px -104px;
width:27px;
height:27px;
}
http://jsfiddle.net/T2EtY/1/
I was wondering if it's possible to change what file the background image repeats to when the old image runs out.
So, if image01.jpg is set as the first background-image, when it runs out vertically image02.jpq would be added as the background image to complete the page?
It might be a straight 'No', thts fine im just wondering
With CSS3 you can have multiple backgrounds. You can specify a background-repeat for each of them. It is supported by all major browsers, except IE8 and before.
http://www.css3.info/preview/multiple-backgrounds/
There's always a solution for something in CSS if you're willing to add more markup to your file. Your best bet is to wrap the element you have the first image in with a containing div with the background you would like to appear if the first image runs out. Like so:
HTML:
<div class="container"><span class="image"></span></div>
CSS:
.container {
background: transparent url(image02.jpg) 100% 0 no-repeat /* Appears on the right */
width: 200px; /* The maximum width */
/* Can also add x pixels padding to ensure that x pixels of image02 are shown */
}
.image {
background: transparent url(image01.jpg) 0 0 no-repeat; /* Appears on the left */
}
Of course you can always replace the <span> with an actual image as well.
Don't forget that HTML is an element, too.
html {/*insert tiling background image*/}
body {/*insert normal background image*/}
The body background will sit on top of the tiling html background. Works in every browser and won't require additional markup.
Is there a way to change the appearance of an icon (ie. contrast / luminosity) when I hover the cursor, without requiring a second image file (or without requiring a hidden portion of the image)?
Here's some good information about image opacity and transparency with CSS.
So to make an image with opacity 50%, you'd do this:
<img src="image.png" style="opacity: 0.5; filter: alpha(opacity=50)" />
The opacity: part is how Firefox does it, and it's a value between 0.0 and 1.0. filter: is how IE does it, and it's a value from 0 to 100.
You don't use an img tag, but an element with a background-image css attribute and set the background-position on hover. IE requires an 'a' tag as a parent element for the :hover selector. They are called css sprites.
A great article explaining how to use CSS sprites.
Here's some code to play with. Basic idea: put all possible states of the picture into one big image, set a "window size", that's smaller than the image; move the window around using background-position.
#test {
display: block;
width: 250px; /* window */
height: 337px; /* size */
background: url(http://vi.sualize.us/thumbs/08/09/01/fashion,indie,inspiration,portrait-f825c152cc04c3dbbb6a38174a32a00f_h.jpg) no-repeat; /* put the image */
border: 1px solid red; /* for debugging */
text-indent: -1000px; /* hide the text */
}
#test:hover {
background-position: -250px 0; /* on mouse over move the window to a different part of the image */
}
a button
The way I usually see things done with smaller images such as buttons it that only a certain portion of the image is shown. Then many states of the picture will make up a larger picture which gets shifted around behind the visible port. I'll delete this when someone has code.