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.
Related
Using https://templated.co/ion
I’m having trouble re-positioning the banner a little lower to allow for use of a logo image at top left instead of text. When I load the page with the new header height, it briefly flashes the correct height white background, but the banner doesn't move down and the page reverts to original positioning, leaving the logo overhanging the banner image, even though I replaced some inherits and increased height of nav.
Any suggestions appreciated.
Most probably, this is what you're looking for (adjust to your needs - 5em is demonstrative):
#header {
height: 5em;
line-height: 5em;
}
#skel-layers-wrapper {
padding-top: 5em;
}
Please note this has to be loaded after style.css (or placed at the very end of it, if you place your own mods inside this file). Alternatively (but not recommended), you could just modify the existing values on lines 880 and 884.
Typically, the best way to go when making customizations is to just place them in a separate file and load it after the original resource, which should remain untouched.
This provides your project with better code control, increased maintain-ability & upgrade-ability. Placing the custom file after the original one allows you to apply changes without having to increase the specificity of the original selectors.
I am at the end of a project. I have written a lot of lines of CSS code and adding the images to a class/id would mean editing a lot of code that I have written. It would be better if a division is added inside a image tag in HTML.
Hence my question is: How to include a division inside a image tag in HTML?
Pseudo selectors might work for me but how do I do it with Pseudo selectors?
If you are not able to solve it, have a look at this link where I have used a different approach:
Make division image responsive
So to not have all the things in the comments I post an answer.
The "problem" on screen-/ viewport widths of 380px and below has several issues.
On your outer <div> with the class slider-wrapper3 (it's the one which holds the iPhone as background image) you should use the following in your CSS:
.slider-wrapper3 {
background-size: contain; /* you use cover */
background-repeat: no-repeat;
/* keep the rest of your actual code */
}
and remove the width setting (width: 310px;) at least for your small screen layout!
By doing so you have then fixed the position and size of the container (and also the background image).
So you still need to adjust the image sizes (probably in your slider script, or wherever the image's dimensions come from).
I'm working with the Shape5.com Corporate Response Joomla template and been asked to make a change to the color of the four icons for social media in the upper right-hand corner. The demo of this template can be found here:
http://www.shape5.com/demo/corporate_response/
Their CSS for each icon looks like this from the template.css file. I'm just including the first icon to keep this brief, which is for RSS:
#s5_rss {
height:23px;
width:22px;
background:url(../images/rss.png) no-repeat top left;
cursor:pointer;
margin-left:8px;
float:right;
}
#s5_rss:hover {
background:url(../images/rss.png) no-repeat bottom left;
}
The rss.png is here:
http://www.shape5.com/demo/corporate_response/templates/corporate_response/images/rss.png
I've been asked to use CSS to change the active/hover color from what it is now to red. I'm not sure if this can be done with CSS or not. Can it? Or does this require a new .png file created with the image by the designer to be the desired red color?
I'd also like to understand why this rss.png file has two images of the icon inside of it at different shades and how does the CSS toggle between them to know which to use for hover? Is this a special .png file that allows this, perhaps in a different format than most .png files? Thanks!
The image is known as a sprite image: a single image file consisting of multiple sprites which you apply as a single background image, and position according to the constraints set by the width and height properties on an element. It's just a regular PNG image and is not intrinsically different from other PNG images.
As for actually changing the color of the image to red, that is not something you can do with CSS alone depending on what you mean by "changing the color" — the safest bet is to modify the image to add a new sprite with the desired color. Since it's just a regular PNG image it's a simple matter of extending the canvas another 23 pixels down, rendering the new sprite in the extra space that's created, and modifying your CSS so it looks like this:
#s5_rss:hover {
background:url(../images/rss.png) no-repeat center left;
}
#s5_rss:active {
background:url(../images/rss.png) no-repeat bottom left;
}
You can also replace the background:url(../images/rss.png) no-repeat portion with background-position: in your :hover and :active rules as you're really only modifying the background position when using a sprite in CSS:
#s5_rss:hover {
background-position:center left;
}
#s5_rss:active {
background-position:bottom left;
}
Experimental CSS filters are up around the horizon, but without good cross-browser support, you're basically out of luck on that front. If you can handle reduced browser support, go take a look at this overview of CSS filters.
Your current code shows only half the rss.png which conveniently is the exact height of just one of the sub-images within it. When you declare the background: you're telling it to stick the image from the top and hide the bottom half.
On hover, you're instructing it to draw just the bottom half of the image (the hovered state part). To make it a different color, you pretty much need to edit the file (short of having the background image partially transparent and showing a red background through it).
Overall, there's nothing magical going on, just well-documented magic that we all share and use every day.
Currently there is no way to change the colours within an image using css and likely there will either never be or a long way off. There is the potential to do a color overlay but this would not help unless the image you were dealing with was a block colour.
In order to change the color you will need a separate image to reference on the hover styling rule for that element.
The alternative way to do this is to use a sprite, where all the images are loaded as one image and css just focuses on a portion of it depending on the state ie hover, active etc. This is what you mentioned earlier. Have a look at the following links for information on using a sprite, but put simply if you have a 40*40px social icon. You would create a 40*80 image and then in css say use the top half for normal and the bottom for hover. This actually saves time when loading your page and you should always try and use sprites where ever possible, remember the faster the page the better for the user.
http://css-tricks.com/css-sprites/ (good guide on sprites)
http://spriteme.org/ (very handy and will do the work for you - recommended)
I am trying to be more Zen in my CSS, and also to reduce the load on my server. I have heard and sort of seen a technique where I can use a background image and an offset value to allow me to download all my little icon images in one single image, and use CSS to display the right image. However, I am a little confused how to do this correctly. Specifically, if I have a 16x16 image, 48 pixels along in my big image, called img.png, I want something like this:
<img style="background-image: url('img.png'); background-position: 48px" />
(Obviously taking the style out into CSS, but inline here for illustrative purposes.)
However, img ignores the offset. If I used something like a span I am not sure exactly how to set the width of the span (in fact I tried, and it seemed to ignore width.)
Any help would be appreciated.
You would use a different tag than an img tag, you need to specify the size of it, and the background position should be negative. You can use a div tag for example, as it's a block tag by default so that you can specify a size for it:
<div style="width: 16px; height: 16px; background: url('img.png') -48px;"></div>
If you only specify one offset, its horizontal position and the vertical position is zero. If it's a vertical offset you have to specify both a horizontal and vertical offset:
<div style="width: 16px; height: 16px; background: url('img.png') 0 -48px;"></div>
You're thinking of CSS sprites. This article should point you in the right direction.
you can use this tool to generate sprite images and also the tool takes care generating the css for you
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? ;) )