I want to fix the size of empty image to 150px. On Firefox, I can use float: left, but it doesn't work on Google Chrome.
HTML:
<div>
<img src='some broken url' alt='no image'>
<br>
<img src='http://farm7.staticflickr.com/6063/6046604665_da6933bd10.jpg'>
</div>
CSS:
div {
width: 450px;
height: 500px;
background: cyan;
}
img {
display: block;
max-width: 100%;
min-height: 150px;
min-width: 150px;
background: grey;
}
Is there a CSS solution for this?
I think there is some misunderstanding. The srcs are supposed to be random urls that I wouldn't know in advanced.
Ideally, use an empty placeholder <div> for this:
<div>
<div><!----></div>
<br>
<img src='http://farm7.staticflickr.com/6063/6046604665_da6933bd10.jpg'>
</div>
... and give it the dimensions you need. This will allow you to do stuff like show a background placeholder image in its place etc.
If you want to style an empty image-tag:
img[src=""] { width: 150px; }
Should work, expect for IE6.
If you want to get it cross browser compatible, the solution from #Tom would be your best choice.
Or jQuery solution (because CSS can't check for broken URLs):
$('img').error(function(){
$(this).css('width', '150px');
});
Related
The website I am developing has a problem showing the background image in Internet Explorer:
img {
width:100%;
height: auto;
/*margin-top : -50px;*/
}
<div class="col-xs-12">
<img src="./images/garri_processing.png">
</div>
While the background-image CSS parameter would work as a solution, you could alternatively solve this by adding more specificity to the image as well by adding an additional class or an ID. Not having that specificity could also get you in some trouble later as the img assignment in the CSS would then be referencing ALL img elements rather than your one div.
Try something like this:
<div class="col-xs-12 exampleClass">
As I said, you could also tie this to an ID.
<div id="exampleID" class="col-xs-12">
Then arrange your CSS from there to fit within your new parameters.
With additional class:
.exampleClass img {
width: 100%;
height: auto;
}
With an ID:
#exampleID img {
width: 100%;
height: auto;
}
CSS should be this.
body
{
background-image: url("./images/garry_processing.png");
}
I came to know that we cannot have an alt for a css generated image.There are solutions that say by having title atribute we can get the alt effect only on hovering on the image,however when we disable the css we will not able to see that text in place of the image.In my case I need the text to be appeared even when the css is disabled .Is there any workaround for getting the text visible when the css is disabled.
<span class="myimageclass">
hi
</span>
<style>
.myimageclass
{
height: 100px;
width: 200px;
background-image:url('http://cdn.osxdaily.com/wp-
content/uploads/2011/10/NSTexturedFullScreenBackgroundColor.png');
color:red;
overflow: hidden;
text-indent: -9999px;
}
</style>
Thanks,
Balaji.
You can use text-indent and overflow: hidden.
This is not flexible method but I hope you can use it.
.image {
width: 200px;
height: 100px;
display: block; /* it needs for inline elements like span */
background: url(http://cdn.osxdaily.com/wp-content/uploads/2011/10/NSTexturedFullScreenBackgroundColor.png);
overflow: hidden;
text-indent: -9999px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image js-image">
Image alt
</div>
<button class="js-button">On/Off styles</button>
<script>
$('.js-button').click(function() {
$('.js-image').toggleClass('image');
});
</script>
#balaji, this is already an SO thread that takes care of CSS in a page, you can pick something from here and fine tune for your needs: How to determine if CSS has been loaded?
I have a division placed on the bottom of the page. I put an image into this division, but I don't know how to modify the image. The problem may be, that the inline style for <img> is setting modification rules for all images. I have an inline style sheet that has this code and HTML code for <div>.
My CSS code looks like this:
<style type="text/css">
img {
image-align: center;
padding: 10px;
height: 200px;
width: 140px;
}
div {
position: absolute;
right: 10px;
}
</style>
And my HTML code is like that:
<div align="center" >
<img src="images/music_banner.jpg" >
</div>
you can do this:
div img{
}
or give the div a name and do this
#div img{
}
or you give the img an id as below
<div>
<img id="mg"/>
</div>
Use id as #mg in CSS code.
or you can do as define class name in img tag.
<div>
<img class="mg"/>
</div>
Use class as .mg in CSS Code.
You might try learning a little bit more about CSS selectors: these are the rules that tell the browser which element you'd like to apply the following rules to.
I would recommend Code Academy for an easy to follow course. You can skip down to the CSS section if you are already comfortable with HTML.
Note: if you google CSS, you'll get "w3schools" as the first results. That website is generally derided on Stack Overflow. I don't know if it's really that bad, but I tend to skip it just because everyone else has a bad opinion of it. Your call if you find it helpful of course.
I should note that I like to use the W3C (World Wide Web Consortium) website for reference, as they're the ones trying to make everything standard. It is a pretty technical read, though.
Create a div element in your HTML code:
<div class="parent">
<img src="image">
</div>
Than add this to your CSS code:
.parent {
width: 42px; /* I took the width from your post and placed it in css */
height: 42px;
}
/* This will style any <img> element in .parent div */
.parent img {
height: 100%;
width: 100%;
}
I am trying to setup background images using CSS but I can't seem to get the images to populate correctly.
Here is the CSS for what I want to do
a.fb {
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
Here is the html code that I am using, I have tried a couple of different ways to populate the images with no luck
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank"></a>
</div>
Any help would be greatly appreciated
Okay added the following and still not go any other thoughts
a.fb {
display:block;
width: 33px;
height: 33px
background-image: url('img/Facebook.png');
}
EDIT: Yup got it working now forgot the ; after height, but no I get a white border around it and tried setting border: none; no luck
a.fb {
border: none;
display:block;
width: 33px;
height: 33px;
background-image: url('img/Facebook.png');
}
An anchor tag by default shows as an inline elements, so it depends on its content in order to get a height and width. To do what you want, you should add some styles: display:block; width: 20px; height: 20px.
You could also change the aproach completely and use html + mouseover and mouseout events:
<div class="footer">
<a class="fb" href="http://www.facebook.com" target="_blank">
<img src="http://www.facebook.com/images/fb_icon_325x325.png" alt="fb" name="fb" width="33px" height="33px" name="image_name" onmouseover="fb.src='http://goo.gl/cxiR7'; fb.width='38'; fb.height='38';" onmouseout="fb.src='http://www.facebook.com/images/fb_icon_325x325.png'; fb.width='33'; fb.height='33';" />
</a>
</div>
Here is a jsBin: http://jsbin.com/onehuw/1/edit
background-image only draws in the space that the element occupies. Your a tag has no content, and therefore it's width is 0. You'll not see any content (and background) until you give it at least some width (and height if needed).
You need to add padding to the <a> tag otherwise it has a width and height of 0 for example:
a.fb {
padding: 20px;
background-image: url('img/Facebook.png');
}
a.fb:hover {
background-image: url('img/FacebookHover.png');
}
You could also just set the width and height of the anchor
Does anyone know how can I control the image source from the CSS?
I need to be able to change the image src from the CSS. I have loop printing < img id=.. > tags, and for every id it different image. I want to be able to set the source by its id from the style css area.
Does anyone know how to do this?
This is not possible: The image's source is part of the markup, not CSS.
The only workaround would be having div elements with background-image properties instead. Those you could set from within the style sheet:
<div id="image1"></div>
#image1 { width: 100px; height: 50px; background-image: url(image.gif); }
However, with this method you lose all the img tag's advantages like
The ability to set an alt text
Resizing
Printing (most browsers don't print background images)
Search engine indexing (probably)
the only other alternative is by using JavaScript, but that obviously won't work if JavaScript is disabled, which makes it a no-no in my view.
This is now possible with CSS3 using the Content style.
I use this to swap images within a slider based on window size through media queries.
Edit: When I originally posted this, I was unaware that it only worked in Webkit at the moment. But I doubt it will take long before it gains more functionality across browsers.
HTML
<img class="img1" src="image.jpg">
CSS
#media (min-width: 768px) {
.img1 {
content: url(image.jpg);
}
}
#media (max-width: 767px){
.img1 {
content: url(new-image.jpg);
}
}
That is not possible with CSS.
However, this is very easy with Javascript:
document.getElementById("IdOfImage").src = "SourceOfImage";
You cannot really do that, however, if you do need to do that using CSS, you can do it for two images with the same size like this:
<style>
img {
width:0;
height:0;
display:block;
background: url('2.png') no-repeat bottom left;
padding-left:196px;
padding-bottom:187px;
}
</style>
<img src="1.png">
Only tested it in FF3.6 though.
I found this article that might be useful. It actually changes background of an image
here is the example in case website goes missing:
HTML
<html>
<body>
<div class="header">
<img class="banner" src="http://notrealdomain1.com/banner.png">
</div>
</body>
</html>
CSS
/* All in one selector */
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}
If you don't want to use backgrounds nor use javascript, you layer 2 images with different src on top of each other (using absolute positioning) and use CSS to hide one or another. Visually it will be the same then changing the src.