Let's say we have requirement that icon image element need to present in HTML because we need to indicate icon existence for some screen readers and it's better to have them like IMG tag than I or plain DIV.
We have sprite.png and empty.png images. empty.png used for creating fake blank image (sprite image will be shown because it's background of our element).
In css we have class
.icon {
background:url('sprite.png') 0px 0px;
width:20px;
height:20px;
}
Then we use this in our HTML like this:
<img src="empty.png" class="icon" alt="Image from Sprite is Shown" />
Can we do it any other way, using our 'sprite.png' as image source with setting any mask/clip property on img with css?
Thanks in advance.
background-image does not take the 0px parameters you have after it. You may be mixing it up with background.
To show the correct portion of the sprite image, you use background-position to select the correct portion of the image.
Here is a simple tutorial page: http://www.tutorialrepublic.com/css-tutorial/css-sprites.php
Related
I have an image not changing on hover and I can't figure out why.
<img src="images/image.png" alt="image" class="portImage2">
This is displaying the image with no issues.
In my css I have
.portImage2:hover{
background-image: url(http://placekitten.com/g/263/167);
}
and the image never changes on hover. Can anyone tell me why?
The background image and the image are not the same image.
When you change the background image, you just change what is behind the image.
If, and only if, the image is translucent you can see the change.
.portImage2:hover{
background-image: url(http://placekitten.com/g/263/167);
}
<img src="http://2.bp.blogspot.com/-XNMmYECsALk/T37gk7mlWaI/AAAAAAAAATg/mM-XXtf5rZ0/s1600/bubble.png" width=236 height=167 alt="image" class="portImage2">
If you want to change the image itself, then you need to change that (the content) and not the background.
.portImage2:hover{
content: url(http://placekitten.com/g/263/167);
}
<img src="http://2.bp.blogspot.com/-XNMmYECsALk/T37gk7mlWaI/AAAAAAAAATg/mM-XXtf5rZ0/s1600/bubble.png" width=236 height=167 alt="image" class="portImage2">
You can't replace image inserted as IMG tag with CSS background property. Browser won't allow you to do that.
Either set the initial background on A element and change it using :hover pseudoclass, or use javascript to attach onMouseOver event and update src attribute dynamically.
Both ways are still bot perfect (or my description is too simplified) but this problem is very basic and it is described in almost every tutorial/introduction to HTML & CSS.
How to give alt and title for background image? Is it possible?
<div id="cont"></div>
#cont
{
background:#FFF url(../images/post.png) no-repeat;
}
You cannot give an alt and title for a css background, but you can give a title to the div.
<div id="cont" title="Title!"></div>
The title will popup upon mouse-idle over the div element.
No, because a background image is only a decorative element which should not have any semantic meaning. HTML is for semantics and meaning, CSS is just for visual appearances. If the image is so important that it should have a fallback alt text, make it an HTML <img> element.
it's simple to give a title tag to the div itself.
about the alt, if you desperately need it, the main road to go would be to put an img in the div with height="100%" and width="100%", or, if this gets in your way, add an 1px img in the div, with the alt, but it won't be seen. zindex may also help if the img is getting in your way and oclude other elements.
good luck,
alex
Yes, sometimes background images have meaning, and semantics can be applied to them.
Example scenario: If the content above the fold has 3 or 4 images, then combining those into a single sprite is optimal.
Having images as a sprite forces them to behave like a background image, but they still look like standard images on the front end, so they should have semantics applied to them.
Here's how to do it:
<div class="img_shell">
<div class="background-img" role="img" aria-label="Alt text here"></div>
</div>
Basically the role="img" should only be applied on an empty div tag.
Ref: If your background image is being applied to the main div wrapper then there is another workaround in this article: https://www.davidmacd.com/blog/alternate-text-for-css-background-images.html
Yes this is possible within PHP like this..
if($moon==0)
{$icon_moon="background: url(mp0.png); background-repeat: no-repeat;
background-size: 15px 15px; background-position: right top";
$title_mph = "Moon phase new";}
In this case the variable ($icon_moon) is inserted in a table for positioning like this
Adding an Alt text is also possible this way.
I'd like to add a hyperlink to this background image. Should I create a new class within the stylesheet? (When I attempted to call the new class, the image disappeared).
body{
background-image:url('http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
line-height:20px; font-size:14px;
font-family:"Trebuchet MS";
margin:0
}
EDIT: Now there's whitespace on the top and bottom (created by the new div class?)
You're using a background-image on the body tag. Assigning a hyperlink to it is impossible.
Also, whats stopping you from using it in an img tag? This seems like a semantically valid thing to do:
<img src="http://thehypebr.com/wp-content/uploads/2010/09/boundless-sem-branco-2.jpg" alt="Image" />
But, if you must use it as a background image, than creating an additional class is the way to go.
You can place a div behind everything on the page, give it a background image, and then add an onclick handler to that div. But you can't hyperlink a background image.
You'd have to do something like:
<body>
<div id='background' onclick='window.location.href="mynewurl"'>
<!-- Rest of page goes here -->
</div>
</body>
Also, add cursor: pointer to the css for the background div so people know it's a link.
OK, I can't tell you if this would be a valid solution, because I would have to see what you actually wanted to be a link. If for example you wanted to make a link to the cream "Boundless" boxes in your background image I do have a work around. It will be a pain to get it correct cross browser, but it's doable.
Make clear gif's the same size as your cream boxes
Put those images in something like this <img src="blank.gif" alt="Link Location" />
Use CSS to make the a tag a block element and place it over the cream boxes in the background image
I would of course clean up my code, it's a mess, but I am sure you can figure that out. Just make sure to have descriptive alt tags for accessibility.
This isn't the best solution, that would be to take the "boundless" boxes out of the background image and place them instead of the blank gifs, but if you HAVE to do it for one reason or another, this option will work.
You're going to have to change your html code a bit to do that. You need to surround the image with a tag, but you can't do that to the <body> tag, obviously.
** EDIT ** Since it's been pointed out my first answer is invalid HTML (thanks, and sorry), you can use a jquery approach like this:
$(document).ready(function(){
$("body").click(function(){
window.location='http://www.yoururl.com';
});
});
The issue with setting up an onClick method, is that you remove the anchor hint at the bottom left of the browser window, as well as any SEO that might be associated with the link.
You can accomplish this with just HTML/CSS:
<style>
.background-div {
background-image:url("/path/to/image.jpg");
position:relative;
}
.href:after {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
content:"";
}
</style>
<body>
<div class="background-div">
</div>
</body>
In this case, the relative positioning on background-div will keep the link contained to only that div, and by adding a pseudo element to the link, you have the freedom to still add text to the link (if necessary), while expanding the click radius to the entire background div.
I'm working on a web application and I'm using the img tag (<img...>).
When the src property is empty, it shows the red x figure indicating that there is no image.
Is there any way to hide that red X icon?
An <img /> tag without an src attribute is invalid HTML. If you do not want to display an image, do not output the <img />tag at all.
If you must output the image tag, thus breaking your html (I wouldn't encourage this), you can hide the [X] in most browsers with one of the following css styles:
<img style="visibility: hidden"/> which hides the image, but still has it taking up space in the page
<img style="display: none"/> which removes the image from the page, making it take up no layout space
The other alternative is to actually link to an image that won't be seen. The classic example of this is to use a 1 pixel transparent gif image. The image won't be visible, although it will effect the page layout.
There's no need adding img tags if you set src to empty string.
If you don't want to print the image, but show it on the screen you can use CSS media types:
<style>
#media print
{
img.noprint {visibility: hidden}
}
</style>
and then add a class to all the images you do not want printed
<img class="noprint" .../>
I have control in a page that gets html from text file and renders that html in webpage.
Right now it has to add image somewhere and reference that image src.
I was wondering if we can render image along with other html code, is it possible?
Yes, it is. You need a Data URI scheme:
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />
The same can be done in CSS:
ul.checklist > li.complete { margin-left: 20px; background:
url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAA
ABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/5
8ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/A
FGGFyjOXZtQAAAAAElFTkSuQmCC') top left no-repeat; }
You can use inline SVG. See this article for mozilla and this one for IE.
You can also create images using CSS and different size characters and playing with z-indexes. Here's CSS Homer.
I've seen it done by creating a table with one cell for each pixel, setting the cell's background color to the pixel's color.