I have single image where all mine site logos/images are clubbed,so how i can fetch required image from main image like logos,arrows etc
I think you're referring to a sprite sheet. Take a look at this link. It helped me out a lot. If you need any help with it after that let me know!
Sound's like your using sprites. There's numerous articles out there dealing with this technique:
http://css-tricks.com/css-sprites/
http://www.alistapart.com/articles/sprites
http://www.peachpit.com/articles/article.aspx?p=447210
Here's an example:
#logo {
background: url(main_image.png);
background-position: 50px -100px;
}
The background-position property is the most important part. You'll want to find the exact pixel locations of each image (any image editor) before you start adding it to your CSS.
Related
I am programming spirit-safe.de, but I think the image is too high so I want to reduce the height. Do I best do this via CSS? Cant find the image in my Ruby on Rails code hence it must be in CSS I think or something.
No clue of Front-End :-)
Please advise.
Guess you are talking about your main image inside page-header container. Somewhere in your CSS files, you have this:
.page-header--hero.-main {
background-image: url(/assets/hero/img03_xl-326aaa5….jpg);
max-width: 1920px;
height: 900px;
}
That's where you are setting the image and height, just change them.
I've seen some interesting css trick on vk.vom recently
background: url(/images/icons/mono_iconset.gif?8) no-repeat left -237px;
width: 15px;
height: 11px;
Here is this spritesheet: Spritesheet.
How is this works?
? has nothing to do here, its the left -237px which determines which icon to show.
It is the background-position: x y along with height that determines which part of an image needs to be shown.
More about css sprites http://cssglobe.com/creating-easy-and-useful-css-sprites/
Seems that the URL parameters have nothing to do with the spritemap itself.
Different heights, on the other hand, are handled by the height in the CSS you provided. Moreover, the y-offset determines which icon will be used.
The URL parameter is probably inserted to avoid problems with caching when deploying a new version of that stylesheet. If you append something using the query string (like ?8), the browser will be tricked into thinking this is a whole other file, so it will discard the cached file and download the new one instead.
The "trick" you are looking for is a CSS sprite. Basicly, every icon is loaded into a single image and the icons in the sprite are used as a background image for a fixed-width container (like an anchor with display: block; or a div). Then, when playing around with the backgound-position property, different parts of the sprite will be visible.
Read more about CSS sprites in this article.
I have a problem that I have two downloaded images on my webpage(second image is overlapped with first image), I have to resize second image which is overlapped, programmatically.
I don't know how to achieve this?
Please suggest me the right result.
The jQuery library makes it easy to do a thing like this.
If you identify the second image by setting it's id attribute id='secondImage', then you could write something like:
$('#secondImage')
.css('width','200px')
.cssS('height','100px');
However, I want to say that plain CSS is likely a better solution. With plain CSS, you could just write
#secondImage
{
width: 200px;
height: 100px;
}
This is my issue.
I have a menu using an image sprite, the image has transparencies, but when I add a :hover, it works, but I am still able to see the original image at the end.
Is there a way to make the hover show the image that I want and REPLACE the original one?
Thanks,
Marco
You can replace an image by using it as a background-image instead of using the <img> tag.
But most of the times, this is slow and another way is maybe good practice:
Create an image that has the :hover image next to it [img|hoverImg]
Do a styling with background-position to change the background.
Like this:
.menuItem
{
background-image: url('hello.jpg');
width:100px;
height:30px;
}
.menuItem:hover
{
background-position: 100px; /* Or whatever measure your image is */
}
The problem with this, is that the image size is fixed. You really have to specify it, instead of just doing this with an image.
I like this as the best way. If you want to set the src in your <img>, this can be done with Javascript, but is much heavier most of the time, because you have to load an extra image from the server.
I have a web application whose performance I am working to enhance. In an attempt to do this, I decided to use css sprites. I have placed all of my images in a .png file called images.png.
CSS sprites have worked well for all css classes that just display an image once. However, several of my images need to be repeated. For instance, I have a banner.png image used for the banner background. Whenever I set the background-repeat property, it seems that the image does not repeat. To show my CSS definitions, here they are:
Before CSS Sprites
------------------
.ghwc {
background-image: url(/images/layout/banner.png);
background-repeat:repeat-x;
color:White;
width:300px;
}
After CSS Sprites
-----------------
.ghwc {
background-image: url(/images/images.png);
background-repeat:repeat-x;
color:White;
background-position:60px 319px;
width:300px;
}
My question is, how do I use CSS sprites for repeated images like backgrounds?
Thank you,
My question is, how do I use CSS sprites for repeated images like backgrounds?
You don't. That is simply not possible using CSS sprites. To do that, you would have to be able to specify an area of the image that is to be repeated, and to my knowledge that is impossible in both CSS 2 and 3.
You can do this if you're only background-repeat:repeat-x; as in the example, you just need to make all backgrounds contained within the sprite image container the same width and lay the sprite image file out vertically. Then your background position property will always have the first x position be 0 and the sprite is located with the second y position (e.g. background-position:0 0; background-position:0 -100px; background-position:0 -200px; etc) . This might not work across all browsers if you can't specify the exact height and set overflow:hidden.
Assuming your background image (images.png) shows at all, your code should work. If you want this to render correctly on Opera and Firefox, you'll need to add
background-attachment:fixed;
Edit: I just realized you're probably talking about a specific coordinate set in a "sprite" image comprised of several 'images'. You're not going to get any one particular area of an image to repeat like that. Crop the image to the size you're concerned about, then use the code you have.
If you want to use repeat-x, you must not put several images next to each other in your sprite as the whole sprite is duplicated in x-direction (as you already noticed). But you can put them in one vertical line. (The other way around if you want to use repeat-y. There is nothing like "background-crop" up to now (maybe in CSS4? ;) )