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.
Related
I am trying to use a image to set the background but when I put in my code I end up with multiply images instead of one whole image, I can't post a picture but here is the code i used in the CSS:
body { background-image:url(../images/kw4.jpeg);}
Am not sure what I am doing wrong?
If you mean multiple copies of the same image all over the page, then that is not actually a bug. When you specify a background image in CSS, your browser will automatically fill the page by tiling the same image over and over.
To prevent this from happening, add
background-repeat: no-repeat; to your CSS. This will render the image only once.
Try:
body { background:url(../images/kw4.jpeg) no-repeat;}
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)
Consider a translucid background-image blocking the pointer-events of css links underneath it. I would like to make the links work even beneath this image.
Is it possible?
If one element overlaps another you can't click it, simple.
You can put the links on top of the overlay, but you will lose the effect on those links. It's not classy, but I guess it would work.
a {
position: relative; /* set them relative, keeping their position */
z-index: 1000; /* set z-index to move it in front */
}
Don't think so!
generally one of the oldest image theft methods was putting image behind a transparent image.
but if it is very important to you you can make hot spots on that image with some usual methods such as html image map or using some of the svg capabilities.
and if there is effects like shadow or something like this you can use css3 to make them with code
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? ;) )
I am wondering if anyone knows how to achieve the following - take a look at http://www.dspts.si
The first 1/3rd of the screen has an empty background and from there onwards there should be a pattern repeating. I did it right now, by creating a very long pattern png and set it to offset 300 and repeat-x. However, I'm not happy with this solution because it will break if the pages ever get longer than the background image png is.
Thanks for any suggestions!
Put the repeating pattern as background to html element, then a white 1px * 300px image as an background image to body element, and you're all set.
html, body {
height: 100%;
}
html {
background: url(dotted.png);
}
body {
background: url(white_1x300.png) 0 0 repeat-x;
}
You don't have to use html and body tags for this, but it's the easiest way and doesn't require any new markup.
You can specify multiple backgrounds. See Can I have multiple background images using CSS?. The techniques mentioned there are:
Put the whole page into another <div> container or misuse the <html> tag for it.
This means you specify a background for <body> and one for <html>.
Use CSS3 which support multiple background images. That's not yet supported by all common browsers.
Yes, specify your background image as normal but set the background-position like this:
background-position:0 300px;
This will make the background image start at 0px from the left, and 300px from the top.
Let's not forget that you can use FireBug with FireFox to easily diagnose techniques on websites.