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.
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>
I have a page that implements basic MS-Paint type functionality using the following palette:
When a tool is selected a grey outline is shown instead.
Currently an image of the window with the grey outlines is set as the background of the window div. The individual tools are on a single separate image:
When I begin to style the window, each tool is absolutely positioned using css of this nature:
#sketchpad_tools .tool.paintbrush {
background: url(../images/sketchpad/selected_tools.png) no-repeat -15px -80px;
top: 90px; left: 10px;
height: 100px;
width: 100px;
}
This requires me to eyeball each position, adjust the top and left properties, followed by finding the right location in the background image where the tool resides. This turns out to be a very time consuming task. If I decided to shrink the background size of the images--which I had to do on multiple occasions--the task becomes twice as long to complete.
Is there a more productive method for quickly styling this sort of functionality?
Instead of using the background image for the palette with the shadows, why not have a selected image (grey) and not selected image (colour) for each tool instead? When the tool is selected just hide the colour image and show the grey version.
If you have the images (without positioning) in a DIV with a width set to that of the palette then they should automatically wrap when the DIV width is exceeded.
See JSFiddle sample here showing how images will wrap in a DIV, just set the width of it.
Code sample you just need to add your image links in and :
<DIV style="width: 300px;">
<p>My Toolbox</p>
<img src="Tool1_Image_Location_Grey" />
<img src="Tool2_Image_Location_Color" />
<img src="Tool3_Image_Location_Color" />
<img src="Tool4_Image_Location_Color" />
<img src="Tool5_Image_Location_Color" />
</DIV>
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.
Currently I'm getting like this in Chrome, Safari, Mobile Safari and Opera. edges are rough.
img {border-radius: 10px; border:3px solid red}
See this example in Google Chrome or Opera or iPad http://jsfiddle.net/4PLUG/2/show/
Borders are fine in Firefox.
and in IE9 border edges are fine but it has a different problem. it shows some space between border and images
How to get the result like Firefox in all other browser?
You can give extra div to your img tag like this:
body {padding:100px}
img {
vertical-align:bottom;
position:relative;
z-index:-1;
}
div{
overflow:hidden;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border:3px solid red;
display:inline-block;
}
http://jsfiddle.net/4PLUG/4/
/* just make sure you're including border radius for all browsers rendering engines */
.img-border{
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border:3px solid red;
}
all browsers have different CSS capabilities, and handle them differently.
if you want the corners to look exactly the same in all browsers, you'll just have to put the curves in the actual image, and not rely on CSS.
An alternative is to use a background image on a div instead, which may get better clipping.
You might want to try wrapping the images in a block element and floating 4 divs in all four corners with border images as a background. Make sure the image itself has an border as well, this makes using radius borders in images quite a lot easier if you have more than one size of images that needs 'm.
I've done this effect with two divs using z-index.
<div class="picture-wrapper">
<div class="mask">
</div><!-- end mask -->
<div class="picture">
<img src="" />
</div><!-- end picture -->
</div><!-- end picture-wrapper -->
Set your background image on mask to the red borders with the middle cut out (png), then use z-index to stack it above the picture div.
Should work cross browser, the only thing is it doesn't account for dynamic widths/height in the images, it assumes all images are the same. AND you're doing a request for that extra mask image.
Up to you.
for img tags , percent border radius work perfectly:
.roundcornerimg{border-radius: 50%;}
<img src='imageurl' class='roundcornerimg'/>
link the image in the body:
<img src="image.jpg">
add your sizing to the image:
<img src="image.jpg" width="100%" height="30%">
Then add in the inline CSS.
<img src="image.jpg" width="100%" height="30%" style ="border:solid thick black;border-radius="25px">
By adding in the inline CSS, the border and border radius will take effect on the image. Just dont style this particular image in the stylesheet because specificity may mess with the inline CSS.
I would like a CSS hover affect for multiple links that affect the same image. If you look at this example site I have Repair, Sales, Upgrades and Data Recovery links. When you hover over any one of them I would like the image to their left to change. You can hover over the image currently there to see what I mean.
website: http://ctuchicago.squarespace.com/
I would create a box that contains the image and all of the links. Then when the box is hovered over the image will change. This doesn't get you exactly what you want - which is only hovering over the link changes the image, but I think it is close enough and far easier.
http://jsfiddle.net/mrtsherman/D5ZRs/
div:hover img { background: url('blah'); }
<div>
<img src="" />
Repair
Sales
</div>
Put the image inside the a tag. Then use position: relative to position the image...
for example
a img{
position: relative;
left: -50px;
}
This seems to work... partially XD
<div class="frontdiv fblankd">
<a href="/audio-video" id="hav" style="width: auto;">
<div style="
height: 80px;
margin-left: 81px;
background: white;
color: black;
">
<h3>AUDIO / VIDEO</h3>
<p>Music Server, Home Theatre, Zone Systems, Universal Remote Control</p>
</div>
</a>
</div>
The basic idea is to have your content in the a tag (like ever body has been saying).
What I've done with the styling is set the anchor to width:auto and wrapped the content in a div. this div I then gave a height of 80px, left margin of 81px, background of white and font color of black.
Wrap the <p>, and <h3> tags inside the <a> tags.