I am trying to use 1 single image file containing 4 images and display them using CSS sprite. Somehow, all 4 images are displayed. I was referring to one of the examples in w3schools.
<div id="ViewTypeContainer" style="float: right; margin-top: 10px; margin-right: 10px;">
<img id="calendarView" alt="" src="/Images/ButtonToggle.png" height="1" width="1"/>
<img id="grdView" alt="" src="/Images/ButtonToggle.png" height="1" width="1" />
</div>
CSS:
#ViewTypeContainer img#calendarView {
width:82px;
height:82px;
background: url('/Images/ButtonToggle.png') 0 0;
}
#ViewTypeContainer img#grdView {
width:82px;
height:82px;
background: url('/Images/ButtonToggle.png') -30px 0;
}
My image file is in .png format:
Can anyone spot my mistake? Thanks.
Yeah: your img tags have their src attributes pointing at the sprite image too.
If you want the sprite image to show up with the positioning specified in the CSS, the images need a transparent image in their src attribute.
Working example using your image here (I've used a data-URI for the transparent GIF):
http://jsfiddle.net/7Ns8L/
And here's another example using what might be more semantic HTML (depending on what these controls actually do), i.e. no <img> tags:
http://jsfiddle.net/7Ns8L/1/
Exactly. You're giving a background image to an image. So the IMG tag is displayed as normal size right over the top of your sprite. The concept of sprites is easiest applied if you work with background-position css property. You could either go through the trouble of generating a transparent .png for your IMG tag source (I wouldn't recommend it), or just replace the IMG tag with a div and give the div the same ID and CSS.
Related
I would like to make a background image for one of my images. The background image is transparent and can be seen at http://webmaster.tsaprotectandserve.com/new_design/images/view_site.png (and I'm pretty sure I have the correct url relative to the document in the code) and the idea is just that one you hover over the images, you can see the view site background image. Before I move the background image to a hover class and center it on the image, I wanted to make sure it works properly just as a background image but it isn't showing up.
My code is
<img style="float: left; margin-bottom: 20px; background-image: url(images/view_site.png)" src="images/white_house_website.PNG" width="490" height="231" alt="White House Website">
My website with the issue is here and the image with the problem can be found if you scroll all the way to the bottom. It is the white house image.
u can view my working solution in jsfiddle:
http://jsfiddle.net/avi_sagi/Ea78j/3/
CSS Rules
.thumb{
width:490px;
height:231px;
background:url('images/view_site.png') no-repeat center;
background-size:100%;
}
.thumb:hover .view_site{
width:490px;
height:231px;
background:url('images/white_house_website.PNG') no-repeat center;
background-size:128px 128px;
}
if your css is in external stylesheets remember to change the url of the background image or mention absolute url to be safe.
HTML
<div class="thumb">
<div class="view_site"></div>
</div>
It is actually working. the image is covering up the "Veiw Site" image.
Because its the background.
i removed the top image via google chrome...
What you want to do is set the "View Site" image as separate div as child of a div around the image.
and set it to appear on hover.
something like
http://jsfiddle.net/hWcMK/
CSS:
.imagebox:hover .viewsite{
display:block;
}
.viewsite{
width:125px;
height:125px;
background-image: url("http://webmaster.tsaprotectandserve.com/new_design/images/view_site.png");
margin-top:-150px;
position:absolute;
display:none;
}
and the HTML:
<div class="imagebox">
<img src="http://webmaster.tsaprotectandserve.com/new_design/images/abc_website.PNG" width="80%"/ >
<div class="viewsite"></div>
</div>
So I am trying to make some images into a sprite. I thought I understood pretty well what I was doing, but then instead of getting 6 different images, I get 1 squashed image 6 times.
Here is my code
img.sprite
{
width:100px;
height:100px;
background-image:url(myimage.jpg) 0 0;
}
img.sprite2
{
width:100px;
height:100px;
background-image:url(myimage.jpg) -100px 0;
}
</style>
</head>
<body>
<img class="sprite" src="myimage.jpg" width="1" height="1" />
<img class="sprite2" src="myimage.jpg" width="1" height="1" />
When I post this, my image is just squashed so I have 6 images of my sprite being resized and distorted, when I want it to give me a resized image of only a portion. It is not cropping for some reason.
Your are combining background images with inline images, this will not work. The background image is for use on things such as divs and other page elements.
also in your css you have the position coordinates within the 'background-image' property, this will not work either, it either needs to be in the generic 'background' css property or the specific 'background-position' one. see http://www.w3schools.com/cssref/css3_pr_background.asp
if you need to use it on inline images try this technique using css clip http://css-tricks.com/css-sprites-with-inline-images/
In a web application I am using images sprites that have alt text. But in Firefox only the actual alt-text overlays the image on screen.
<img width="36" height="36" class="step1Current" title="Step 1" alt="Quote step one image">
Its class is:
.step1Current{
background: url(../images/progress-sprites.png) no-repeat;
background-position: 0px 0px ;
width: 36px;
height: 36px;
}
So the image is overlayed with the text 'Quote step one image'.
You shouldn't use a background on an img tag.
If you don't specify a src="" god knows what will happen, the alt should show up.
Inline sprites: http://css-tricks.com/css-sprites-with-inline-images/
Live Demo: http://css-tricks.com/examples/CSSClip/
The key is the clip property, which works all the way down to IE6.
I'm trying to use a simple CSS-sprite for image-based rollovers inside a Facebook Tab page, and the background images are being stripped by Facebook. To be clear, this problem only occurs inside a Tab page, but not in the main application itself.
Facebook also appears to be extremely picky about when it strips background images - background images applied to anchor tags are removed, but background images applied to the list element containing the anchor remain intact.
For example, given the markup:
<li><img src="http://absolute/path/to/spacer-image.png" alt="" width="172" height="43" /></li>
the following CSS will apply a background to the list element successfully:
li {
background: url(http://absolute/path/to/some/image.jpg) no-repeat 0 0;
}
but the same CSS applied to the child anchor tag is stripped out by Facebook:
li a {
background: url(http://absolute/path/to/some/image.jpg) no-repeat 0 0;
}
Is Facebook actually capable of supporting image-based rollovers inside a tab, and if so, how?
Discovered a solution of sorts through trial and error, though it involves invalidly stacked html and looks pretty nasty.
Modify the markup so a div is inside the anchor tag:
<div><img src="http://absolute/path/to/spacer-image.png" alt="" width="172" height="43" /></div>
and apply the background image to the div instead of the anchor:
li a div {
background: url(http://absolute/path/to/some/image.jpg) no-repeat 0 0;
}
You can then apply the background offset like this:
li a:hover div { background-position: 0 -43px; }
It does work but I'd much rather a less-hacky solution if anyone can suggest something.
How to put an image over another bigger image, like on youtube, a play button is displayed on top of video thumbnail?
Make a semi-transparent PNG graphic with a "Play" symbol and the size you want (e.g. 240x320).
Let's say you named it "overlay.png", and let's say the YouTube-generated thumbnail is at http://img.ytimg.com/abcdefg/0.jpg
Now all you need in your code is this:
<a href="destination_of_your_link">
<img src="overlay.png" width="320" height="240" border="0"
style="background: url(http://img.ytimg.com/abcdefg/0.jpg) center center black;" />
</a>
As long as your target audience is not still using IE6, you should be safe.
I'm not sure that YouTube uses images for this effect, isn't it still the Flash player?
Anyhow, exactly how this is done depends very much on the design you want to achieve. Lets assume that you want to achieve the YouTube style, where you have a thumbnail image and want to overlay a play button image on top. If you want the thumbnail to be an actual <img> tag you will need some extra markup, like this:
<div class="thumb-wrapper">
<img src="mythumbnail.gif" alt="my awesome video" /><span></span>
</div>
The wrapper <div> is required so you can target the img and span correctly, and have dimensions to contain them in. The span is where the overlay image will go.
.thumb-wrapper {
position:relative;
}
.thumbwrapper span {
position:absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
background: transparent url(overlay.png) no-repeat;
}
(I haven't actually tested this, if its blatently wrong let me know I'll revise it!)
This assumes a couple of things:
Your thumbnails will always be a fixed size and your overlay image matches that
Your overlay image is a semi-transparent PNG
You could also use the opacity: style to achieve #2. Of course, IE6 will rear it's ugly head and you'll need to use a PNG fix for it if going the transparent image route, or a separate opacity filter if using that method. Both of these are undoubtadly answered elsewhere on Stack Overflow or easily google-able.
If you have other requirements it might be possible to do this without the extra markup, as I said it all depends on what you need exactly. Some requirements may not be possible without JavaScript (which would of course mean you could inject any extra markup with that!).
You will find the solution in the following thread on StackOverflow:
How to draw a graphic over another graphic
Shortly (quoting after Ipsquiggle) :
<div style="position:relative">
<div>
<img url="backgroundimg.png">
</div>
<div style="position:absolute; left:0; top:0;">
<img url="smallgraphic.png">
</div>
</div>
More details why and how it works in the original thread.
If you have good control over image size, we have used the background to various elements - for example, set the background of a table cell to one image and put an img tab inside the cell.
Taking your example of youtube, you could very easily do this with 2 images and 1 img tag and a little bit of CSS of course ;)
<style>
img.youtube {
width:500px; height:500px;
margin:0; padding:0;
background:transparent url(/point/to/your/larger/image.jpg) no-repeat center
}
</style>
<img src="/point/to/youtube/play/image.png" alt="Gotta have alt text ;)" border="0" class="youtube" />
How it works is simple, you have the small youtube image as transparent PNG or GIF and then set the background image as the larger image, this will then give the effect of the smaller image being in the center with no extra markup.