Get icon from single png image - html

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/

Related

Responsive grid using image sprite as CSS background image

Wow, this was harder than I anticipated!
We're trying to use an image sprite as CSS background image on a responsive website in a grid.
Please check out our jsfiddle of the scenario.
So essentially, when this is resized, the background images from the sprite need to be resized to fit the parent container (<span>).
I have converted the background image to a data:image thinking this would be the first step (although I'm not sure) and now not really sure how I can make the background images from the sprite respond.
Everything I have tried so far ends up displaying the full sprite image in each container in the grid.
You're using absolute pixel values and background sizes in fluid setting.
Try converting your background-positions to a fluid unit (like percentage) and adding background-sizes to allow the spritesheet to resize with the container.
By removing the inner height of the image container and applying a padding, you can make the container's height ratio stay the same:
.credits-grid li span.image {
background: url(../images/credits.png) no-repeat;
padding-top: 90%;
height: 0;
overflow: hidden;
background-size: 500% auto;
}
Then by calculating the percentage coordinates of the sprite's location instead of the pixel value, you can allow it to freely move into place as the container changes size:
.credits-grid li span.image.c10 {
background-position: -26% 50%;
}
You can see this in action on this fiddle here: http://jsfiddle.net/nsvka987/2/

css3 background transition flickers on first :hover

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?

Sprite as a background image: how to display in bigger container?

I need to use sprites as a background image for element type of <a> tag.
The problem is that I need to display only one part of the sprite (for example 17px x 17px) and container can be higher. In this case, instead one my background image and than empty space, I get image I wanted to have and under that next image (which I don't want to display).
Is there any way to limit the height and width of the square on sprite i would like to display? I cannot set just height and width for the whole <a> tag.
Example:
And what i would like to do is not displaying the part from second image which is on the same sprite (its' only example; in the project i display text in the whole line, so changing width is not a solution)
Set the height and width for the sprite
a {
display: block;
background: url(sprite.png) no-repeat;
height: 17px;
width: 17px;
}
EDIT : after OP put a screehshot
You will need to use the :before pseudo selector along with the content property
Build a demo at http://jsfiddle.net/SqbnC/
a:before{
background:url('http://pf.staticfil.es/hp/img/sprite2.png');
width: 22px ;
height: 22px;
display:inline-block;
content:"";
}
I have specified the height and width as 22px because that's the dimension of the icon that i show from the sprite
You should use background position in your css class.
As an example..
.classsample{
background:url('YOUR IMAGE PATH') no-repeat 0 -20px;
height:10px;
width:10px;
}
Update the value 0 and -20 based on your image portion which you wanted to show in the div. And finally you should not use IMG tag on your Anchor tag, you have to pass the image via CSS class as above.
<a class="classsample" href="#">TEXT</a>
Use padding if there are no text in the Anchor tag.

Clip images with HTML and CSS

I want to display images in a 144px x 144px div element.
Images are always larger than 144px and so I want to zoom scale them. By that I mean that the smallest side will touch the edge of the div, cutting a bit from the other side - the opposite of letterbox.
How can I do this and have it work on older browsers like IE as well?
EDIT:
Changed the image, the first was wrong, sorry.
Resize the image so that inside the div there is no space without image
My first answer addressed intentionally blocking out the part of the image while intentionally keeping the space occupied. If you just want part of the image visible with no space or anything else taken up, the best option will be to use CSS Sprite techniques.
Here's an example:
HTML (copy and paste into your own file for a full test):
<html>
<head>
<style type="text/css">
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
height: 100px;
width: 235px;
}
</style>
</head>
<body>
<div class='clippedImg'> </div>
</body>
</html>
CSS (this is really the key):
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
}
You can adjust the position numbers to get exactly the portion and size of the image that you want.
Note also that if you want a black box around this, it's even easier than the other post I made. Just put a parent div around this one:
<div class='blackBox'>
<div class='clippedImg'> </div>
<div>
With a padding and width set to create the black-box effect you want:
.blackBox {
background-color: black;
padding: 0 20px;
width: 235px;
}
Set only the width of the image to 144px in CSS or in the attribute. The height will scale automatically. I'm fairly certain this works as low as IE 6. I'm not certain about anything older than that.
If I read your question right, you aren't trying to resize the image, but rather to actually cut off part of the image. If you just want to resize the image, then follow the other answers about that.
The simplest way I can think of to actually cut off the image this is to add <div class='blockOut'> </div> and then use CSS to place & size the div, make it's color match the background color of your page, and put it in front of the image. Example CSS:
.blockOut {
position: relative;
top: -100px;
left: 100px;
background-color: white;
z-index: 2; //this is the important part for putting this div in front of the other one
}
Edit: Note that since you added an example showing that you want all sides blacked out, this would require separate divs for blacking out the top, each side, and the bottom. Also, if you want part of the image to show through (as it does in your example) you can use CSS transparency options.
div{height:114px;width:114px;overflow:hidden;}
div img{position:relative;left:-100px /*or whatever you want. can change it with js*/;top:-100px;}
that is masking to only show a part of the img, as you say in the title. but in the description says you want to resize the img. decide yuorself
to do what you want with css, you should use max-height:144px;max-width:144px. but ie6 doesn't implements those simple properties, so you'll have to use js

frame using a Background-image

I put a frame in my images.
I created a CSS for the background-image is the image of the frame, but he must have an x padding for the frame is seen.
img.frame
{
background-image:url('http://bit.ly/k8g8zz');
background-repeat:no-repeat;
background-position: center;
background-size: 100%;
padding:23px 14px 60px;
}
I can not use a div inside of another because I need this image is a link with a title, and the W3C can not be div tags within a.
If possible, change the jsFiddle and send me the link
See the complete code here.
As you can see in jsFiddle, the frame is the wrong size .. she needs to grow along with the image and have a padding.
Thank you all for your help.
You almost have it! Just set both dimensions of background-size;
background-size: 100% 100%;
http://jsfiddle.net/vLBXH/
You can't set a width and height for a background-image in CSS, AFAIK. If you use a fixed-width image (PNG) you also should have images of the matching size. Another approach might be to style the frame with CSS only or have an framing-tag around the linked image, which you then may style, like:
<div class="img_frame">
<imgr src="#noimg" />
</div>