I've come across an interesting problem in the following line of code:
<img style="background-image:url(Resources/bar.png); width: 300px; height: 50px;"/>
In Safari (at least), a gray border surrounds the 300x50px area. Adding style="border: none;" doesn't remove it. Any ideas?
Thanks.
Mike
So, you have an img element that doesn't have a src attribute, but it does have a background-image style applied.
I'd say that the gray border is the 'placeholder' for where the image would be, if you'd specified a src attribute.
If you don't want a 'foreground' image, then don't use an img tag - you've already stated that changing to a div solves the problem, why not go with that solution?
You can also add a blank image as a place holder:
img.src='data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw=='
This should do the trick!
Actually, this seems to work at least on Chrome:
img {
content: "";
}
The following will use css to set the src to a tiny transparent image which solves the src attribute issue while maintaining control from image:
content:url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')
My overall approach is to define the following in my reset.css, then use a class to provide the actual image and control it. This behaves just like an img, but is entirely css controlled.
img {
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
*display: inline;
vertical-align: middle;
*
vertical-align: auto;
font: 0/0 serif;
text-shadow: none;
color: transparent;
background-size: contain;
background-position: 50% 50%;
background-repeat: no-repeat;
box-sizing: border-box;
}
img:not([src]) {
content: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
}
.myuniqueimage {
background-image: url('../images/foobar.png');
height: 240px;
}
Thanks to +programming_historian and +binnyb for the data:image tip
try <img border="0" />
That should do the trick.
EDIT
Sorry I see you are doing something very wrong.. you are setting a background image on a img tag.. that doesn't really make sense...
instead of a imagetag use a
<div style="background-image: url(Resources/bar.png);"></div>
or if it is a image you want in that area use a
<img src="Resources/bar.png" border="0" Width="500px" Height="300" />
img tags need a src attribute.
e.g.,
<img src="Resources/bar.png" alt="bar" width="300" height="50" />
But img is only for inline (foreground) images. If you actually want the image to be a background of something, you need to apply the style to the actual element you want it to be the background of:
<div style="background-image:url(Resources/bar.png);">...</div>
Tried setting the border to 0px?
EDIT: Yes, you are meant to have background images in the css of another class. Doing it in div or in the body tag (depending what your trying to do) will work. It also stops the background image being a element in itself which would screw the flow of the elements on the page and mess your positioning up.
<div class="myDivClass">content to go on TOP of the background image</div>
CSS:
.myDiVClass
{
background: url(Resources/bar.png) no-repeat;
width: 300px;
height: 50px;
}
or
<div class="myDivClass" style="background: url(Resources/bar.png) no-repeat; width: 300px; height: 50px;">content to go on TOP of the background image</div>
It's best to keep CSS seperate as it otherwise defeats part of the point though.
I had a similar issue where my initial HTML had an IMAGE tag with no source. My Javascript determined which image to show. However before the image was loaded the user saw the placeholder box.
<img id="myImage">
My fix was to update the initial image tag CSS to
#myImage {
display:none;
}
And then used a JQuery to show it once its content was loaded.
$('#myImage')
.attr('src', "/img/" + dynamicImage + '.png')
.fadeTo(500, 1);
Try setting this instead of background-image:
background: url(Resources/bar.png) no-repeat;
if is happening only in Safari and not in other browsers try to reset the browser CSS using something like YUI CSS RESET
The correct way it would be to separate the css from code and to have a CSS class for the image.
<img src='whatever.png' alt='whatever' class='className' />
and in the css to define what className looks like.
,className {border:0;}
I know this is an old question but I found this useful..
In the case that your Resources/bar.png is a foreground image in the form of a sprite, it makes sense to use an img tag rather than a div. When you do this it can help to have a 1px transparent image file which you use for the src attribute, then set the background image as you do here e.g.
<img src="transparent.png" style="background: url(sprite.png) x y" />
Here you set x and y to be the pixel position on the sprite that you want the image to start at. This technique is also explained at: http://www.w3schools.com/css/css_image_sprites.asp
Of course the downside of this is that there is an extra request, but it you're always using the same transparent image for you sprites it's not a massive deal.
Try this one, it worked for me(on chrome and Safari). That was not the border but the shadow, so please add this line to the tag:
{-webkit-box-shadow:none;}
Hope it works for you too.
add an empty src="" to your image component if your using as a background-image in css the square will disappear
<image class=${styles.moneyIcon} src="" ></image>
Related
I have a responsive web page which inside a Div tag i have an IMG tag as follows:
<div id="frontPage">
<img src="img/bg.jpg" height="500px" width="100%">
</div>
It runs great on desktop, However, Using CSS with #media would be great if i didnt touch this code in the Div tag above. When i comment or delete this code inside the Div tag and use CSS to add the same image using CSS, It appears zoomed in and ugly and not like it is in Plain old Static HTML so its why i am trying to avoid using CSS and instead a different way like using Javascript possibly.
This is the code i use in CSS which comes out ugly:
#frontPage{
max-width: 100%;
height: 450px;
background: url(img/bg.jpg) no-repeat left 0px ;
}
It comes out Zoomed in and ugly and well i tried everything i can including changing the height and width like in the IMG tag and its frustating that it wont come out as it does in the IMG tag in the html code.
Is there any possible way of doing this Using Javascript where the Phseudo code will go ass follow:
<script type="text/javascript">
//Phseudo Code
if (mobileScreenSize == 480){
//Mobile Image
<img src="img/mobileImage.jpg" height="500px" width="100%">
}
else
{
//Regular desktop image
<img src="img/bg.jpg" height="500px" width="100%">
}
</script>
I dont know what else to try, and i want to avoid using the CSS since it doesnt seem or i donnt know how to make it come out as it does using the HTMl IMG tag.
When you want to use CSS to modify the background image, you need to set the "background-size" property. For example,
#frontPage{
max-width: 100%;
height: 450px;
background: url(img/bg.jpg) no-repeat left 0px ;
background-size: 100% 450px;
}
If you want to take the javascript approach, then that's also fine and the way you add an image to a div is by doing something like this.
var elem = document.createElement("img");
elem.setAttribute("src", "img/bg.jpg");
elem.setAttribute("height", "450px");
elem.setAttribute("width", "100%");
document.getElementById("frontPage").appendChild("elem");
Prequel: I am using Bootstrap Carousel . Since I want to use background-size: cover, I am using a div with background-image set, instead of the default .
The issue: For some reason, the carousel doesn't seem to preload the next image. When I click next image, I can see the image being downloaded. Unfortunately, I think because of this lack of preloading the images aren't getting the right size (Set by JS) in some browsers:
Anyway to make it preload all the images in the carousel?
This seems to work great. Just place this with your images in the url() outside of the carousel.
#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
#preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }
Credit:
http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
Create a class for e.g. .preload hide it using display: none; as it will not only hide element but also remove its impression on page(height/padding/margin/etc).
after that create div with .preload class.
<div class="preload"></div> below <body> tag. That will force it and its child elements to get loaded before anything below gets loaded.
Now you can add your images using tag into the div and it will load initially but won't display in preload div.
Refer below code for better understanding:
CSS: .preload{ display: none; }
HTML
<div class="preload">
<img src="preload-this-img-1.jpg" />
<img src="preload-this-img-2.jpg" />
<img src="preload-this-img-3.jpg" />
</div>
Note: Search engines may not be happy with loading one image two times and not using alt="" in image tag, I will update with solution for it, if found
I need a menu consisting of images and the images should change when someone hover around it.
HTML
<div id="menu" >
<img src="images/about.png" alt="logo" />
</div>
CSS
#menu {
margin-left : 353px;
margin-top : -70px;
padding-bottom : 16px;
}
#home {
background : transparent url(images/about.png);
z-index : 1;
}
#home:hover {
background : url(images/aboutR.png);
z-index : 2;
}
The problem I am facing is that when I hover around the menu item, the image to be displayed on hover is displayed at the back of the old image. Moreover, the hover background image displayed is very small in width and height. Please help out. Thanks
As previously stated, no need for a JS solution.
Another way of doing it is by loading both images and hiding/showing them with the :hover event. Something like this:
HTML:
<a id="home"><img class="image_on" src="images/about.png" alt="logo" /><img class="image_off" src="images/aboutR.png" alt="logo" /></a>
CSS:
.image_off, #home:hover .image_on{
display:none
}
.image_on, #home:hover .image_off{
display:block
}
Here is a js/jquery solution
//should go inside your <head> tag
function onHover()
{
$("#menuImg").attr('src', 'images/aboutR.png');
}
function offHover()
{
$("#menuImg").attr('src', 'images/about.png');
}
html:
<div id="menu" >
<a href="#" id="home">
<img id="menuImg" src="images/about.png" alt="logo" onmouseover="onHover();"
onmouseout="offHover();" />
</a>
</div>
Here is a working example. Happy coding :)
Place this code just before the closing body tag,
<script type='text/javascript'>
$(document).ready(function(){
$(".home").hover(
function() {$(this).attr("src","images/aboutR.png");},
function() {$(this).attr("src","images/about.png");
});
});
</script>
place the class home in the img tag. Done. Works perfectly.
This works:
<html>
<head>
<title>Example</title>
<style type="text/css">
#menu {
width: 400px;
height: 142px;
margin-left: 353px;
margin-top: -70px;
padding-bottom: 16px;
}
#menu:hover {
background: url(lPr4mOr.png);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="menu">
<img src="lPr4m.png" alt="logo" />
</div>
</body>
</html>
(Image names changed for my convenience making the page.)
Remove the img tag, and set the width and height of #home (and any other menu item) to the width and height of the images.
Also, set the content to whatever the alt of the image would be (for accessibility purposes), and then set the text-indent property so it's moved offpage.
Currently, when you hover, it's changing the background image, but the img tag is on top, and it always will be.
HTML
<div id="menu" >
Home
</div>
CSS
#menu{
margin-left: 353px;
margin-top: -70px;
padding-bottom: 16px;
}
#home{
background:transparent url(images/about.png);
width: 400px;
height: 142px;
z-index:1;
text-indent: -9999em;
}
#home:hover{
background:url(images/aboutR.png);
z-index:2;
}
you could do a:hover img{display:none} which would get rid of the img, idk about size issue bc you didnt specify the sizes. if i were you i'd either ditch the img element, use it as background-image for a element, then change it on :hover. or if you want the img element, use the clip property following the same principles as above
You're calling <img src="images/about.png" alt="logo" /> twice, once in the html and once in the css. I suggest deleting the html and strictly using css background image. You don't need the z-index either.
you need to use position rule while using a z-index rule. Try adding position:relative where you used z-index.
are you just trying to make a simple image rollover? without seeing a working example i can't make out exactly what you're trying to do, but image rollovers are simple to do with CSS sprites, no jquery needed and this makes for a much more bulletproof website. it also makes your website respond faster because the default and over state images are the same image, no preload code necessary.
if you need a mapped image (rather than a full swap out) this can be accomplished with a background image, a container div and png-24 graphics (javascript required to make png-24s work in IE6, but who cares about supporting IE6 anymore anyway?).
a good way to change out nav images without resorting to javascript is by using the background-position property, like so:
// define your container element
#nav-home {
margin: 20px 5px;
height: 15px;
width: 40px;
}
// use a descendant selector to style the <a> tag
#nav-home a {
background-image: url("/images/buttons-nav.gif");
display: block; // THIS IS VERY IMPORTANT!!
background-position: 0 0; // the first number is horizontal placement, the second is vertical placement. at 0 0 it is positioned from the top left corner
height: 15px;
}
// this is where you change the position of the background for the hover state
#nav-home a:hover {
background-position: -20px 0; //this moved it 20px to the right
}
and your html code would look like this:
<div id="nav-home"><img src="/images/transparent.gif" alt="home" height="100%" width="100%;">
<!-- uses a 1px transparent gif to "hold" the place of the actual clicked item -->
your image would actually contain BOTH on and off states, like this: http://www.w3schools.com/css/img_navsprites_hover.gif then all you are doing is moving the image to one side to show the :hover state. (code example at http://www.w3schools.com/css/tryit.asp?filename=trycss_sprites_hover_nav). you are basically making a window with a container div, then only showing a portion of the actual background image.
also, stay away from using :hover on anything but an tag as not all browsers support use of :hover on block level elements.
And now for the simple way:
<img id=logo src=img1.png onmouseover=logo.src='img2.png' onmouseout=logo.src='img1.png'>
This HTML will change the image to a new picture on mouse over and turn it back to the first picture on mouse out.
I have an image on a webpage. It's a pretty big image, however. It's 6144*768. In actuality, it is a series of 6 images mushed together.
I read that it's better practice to load this one image instead of loading 6 images. I've found this to be true as well, when I used tables and CSS.
However, when I set this image as the source of an image element and then set the size of the image element to 1024*768, the image is squished. Ack!
How can I get this image to be not-squished by using only Javascript? Also, how could I move the background of the image?
[example: Imagine a really long strip of paper. Then, place a small cut-out rectangle of paper over that somewhere on the strip of paper, so that you can only see the part of the strip that is inside the rectangle. This is what I want to do]
Place the image inside a container element, and set the overflow to hidden using CSS.
Leave the image as it is and it won't be squished
HTML
<div id="imgContainer">
<img src="myImage.jpg" alt="" width="6144" height="768" />
</div>
CSS
#imgContainer
{
height: 1024px;
width: 768px;
overflow: hidden;
}
Then to move the image use negative values for the CSS style margin-left.
#imgContainer img
{
margin-left: -1024px;
}
You can do this with jQuery as follows
$("#imgContainer img").css("margin-left", "-1024px")
What OP is looking for is CSS Sprites (also see A List Apart or Smashingmag).
Don't scale your image with CSS; instead, put it in a wrapper div and do something like this in your CSS:
#myImageWrapper {
height: 1024;
width: 768;
overflow: hidden;
}
I have an image (in the top left as a home link), and I use the CSS :hover to change the image upon rollover.
The problem is, the image takes time to load the first time I rollover it. There's a temporary blank space, and you see the image incrementally load. It takes about a second, but it's annoying.
How can I fix this so the rollover is seamless? Is there a way to preload the image?
There's two options I can think of, off-hand:
css image sprites, or
placing the :hover image in a hidden div elsewhere in the page.
1, sprites:
For a CSS Sprite, have one background image for the 'home' link, and simply change its position on the :hover:
#home {
background-image: url(http://example.com/spriteOne.png);
background-repeat: no-repeat;
background-position: 0 100px;
}
#home:hover {
background-position: 0 200px;
}
This does require set heights for the elements with the css-sprite background, though.
2, hidden preloading elements:
#home {
background-image: url(http://example.com/bg.png);
background-repeat: no-repeat;
background-position: 0 100px;
}
#home:hover {
background-image: url(http://example.com/hoverBg.png);
}
#preload,
#preload img {
display: none;
}
<div id="preload">
<img src="http://example.com/hoverBg.png" />
</div>
1. Answer:
Use CSS Sprites
2. Answer: Or create something like this:
<a href="link.html">
<!-- Remove this img-tag if you don't have a 'nohover' background -->
<img alt="image" src="images/image.png" class="nohover" />
<img alt="imagehover" src="images/image.png" class="hover" />
</a>
And the CSS:
img.nohover {
border:0
}
img.hover {
border:0;
display:none
}
a:hover img.hover {
display:inline
}
a:hover img.nohover {
display:none
}
A method that I have found works really well for rollovers is using CSS sprites, i.e. using an image that contains both the original and rollover versions of the image. That way both versions load at the same time, and changing between them is just a matter of changing the background-position style.
One way to do it is to add an invisible image to your page, with the same URL. So by adding the following to the beginning of the documents body, you actually instruct the browser to load this image as soon as possible.
<IMG src="rolloverImage.png" style="display:none">
While this tag remains a part of your document, it is not shown or even rendered because of the "display:none" settings. You can even listen to its load event and remove the tag completely from the DOM once it is loaded, to keep the "garbage" out of the document. Once an image is loaded to memory, it is automatically reused every time you refer to the same URL, so once you set the source of the other image to the same URL, it will be loaded from memory.
Hope that helps,
Kobi
Put the image in a div with a style set to { height: 0; overflow: hidden; }, that should make the browser preload the image.