I just begun to learn how to use image sprites in order to optimize my site better. However, there is this white border on the right and bottom side of my image element. I searched for posts on here and google and cannot seem to figure out how to remove the border.
I did read it was caused by using the image element, however, I need to use this element for SEO purposes. By using a div it would cripple my SEO in regard to images (from what I have read anyways). Can anyone help me figure this out? It did this in both Chrome and Firefox. Thank you
[White border on right and bottom of image container][1]
<img class="image-sprite" src="">
.image-sprite {
background: url("../images/gallery-sprite.png");
background-color: #3a3a3a;
background-position: -17px -10px;
background-repeat: no-repeat;
width: 360px;
height: 470px;
}
Are you able to put the background URL directly into the img tag in HTML? Like this:
.image-sprite {
background-color: #3a3a3a;
background-position: -17px -10px;
background-repeat: no-repeat;
width: 360px;
height: 470px;
}
body{
background-color: gray;
}
<img class="image-sprite" src="https://w3schools.com/html/img_girl.jpg">
I've posted an example below, see can you find any white space on either side? The problem might be the 'image-size' you using and dimensions that you are placing your image with. If your image finishes by the time it reaches the right end or bottom end, obviously then and only then you'll see the white space, otherwise there is no issue in using sprites. Either increase your image in size, or decrease its width and height.
.image-sprite {
background: url("https://picsum.photos/200/300");
background-position: -10 -10px;
background-repeat: no-repeat;
width: 100px;
height: 100px;
}
<img class="image-sprite">
Related
I'm trying to put an image OVER an existing image, by way of CSS background-image:url(...).
I have the following class:
.imageContainer {
width:318px;
height:207px;
background-image:url('images/Generic Chrome Notification no_image.png');
}
Then, I have this class:
.iconImage
{
width:45px;
height:45px;
background-image:url("https://image.s7.sfmc-content.com/lib/fe9613727166077c73/m/1/bf347e87-2e3f-4e6d-9c5f-806d3ef1e4af.png");
}
Finally, here's the output:
The white square in the image above (number 1) is actually part of the number 2 image. I have my HTML laid out such that the white square above corresponds to the first CSS class mentioned above. But, I don't see the image there. I F12'd Dev Tools to make sure that the <div class="iconImage"></div> was actually in the white square, and it is.
So, is it possible to super-impose images on top of each other by using background-image:url(...)?
The (background) image you are using in .iconImage is 180x180 px large in original. Since you don't define a size, it is displayed in original size, but only a part of it is visible. Here's what the image looks like:
Its size is 180x180px, major parts of it (top and bottom above and below "AMGEN®") are just white, and only its top left is visible in your screenshot: It's a 45x45px white part (the upper left corner) of the image. So everything works as desired, but it looks like there is no image, since that top left part is just white...
The one thing you have to change to show the whole image scaled down (which you probably want) is to add background-size: cover...
Yes you can, here is an example with 2 images overlaid on top of a another image
.img1 {
position: relative;
height: 400px;
width: 400px;
background: url(https://images.unsplash.com/photo-1587613754760-cd9a285831b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=60) no-repeat;
background-size: cover;
}
.img2 {
position: absolute;
top: 20px;
left: 20px;
height: 100px;
width: 100px;
background: url(https://images.unsplash.com/photo-1589292943875-996861aa36a3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=60) no-repeat;
background-size: cover;
}
.img3 {
position: absolute;
bottom: 20px;
right: 20px;
height: 100px;
width: 100px;
background: url(https://images.unsplash.com/photo-1589469884538-4e5d63671b09?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=60) no-repeat;
background-size: cover;
}
<div class="img1">
<div class="img2"></div>
<div class="img3"></div>
</div>
I'm trying to use this image as part of the navigation bar, but the problem is there are big white spaces around the image and I cant remove it. I've tried setting the margin and padding to 0, it doesn't work.
This is what it looks like:
UPDATE: HTML & CSS CODE
HTML
CSS
2ND UPDATE
I finally solved the problem guys.. thank you to everyone who helped!
you could try to crop the image. Otherwise you can make use of CSS.
For example:
<style>
img {
position: absolute;
clip: rect(0px,60px,250px,10px);
}
</style>
You could use CSS and play around with the background-size & background-position properties, like this:
div.image {
width: 100px;
height: 100px;
background-image: url('https://i.stack.imgur.com/sOO9j.png');
background-size: 700px 700px;
background-position: 419px 438px;
border: 1px solid red;
}
<div class="image"></div>
Using the Gimp Image Editor I have cropped your original image and used that as the background instead, this is what it looks like:
div.image {
width: 100px;
height: 100px;
background-image: url('https://i.stack.imgur.com/MaYMF.png');
background-size: 120%;
background-position: 112px 115px;
border: 1px solid red;
}
<div class="image"></div>
The image you provided above is way too large, meaning that when you crop it the cropped image will be a low quality image. I'm sure it would be far easier and if you used a software like Gimp Image Editor or Photoshop to modify your image your self to get the specific image you wanted down to the pixel and you could simplify the my CSS to get this:
div.image {
width: 100px;
height: 100px;
background-image: url('https://i.stack.imgur.com/sOO9j.png');
background-size: 100% 100%;
background-position: center center;
border: 1px solid red;
}
NOTE: the red border is used to help you better see where the image is.
NOTE: the red border is not required to make this work.
I'm attempting to have a div background image change to a new image on-hover, and it's working correctly, however, when the image is swapped it shifts slightly. Is there a way to eliminate this shifting effect?
.temptext {
background: url("my-img1.png");
background-size: 35% 33%;
background-repeat: no-repeat;
height: 100%;
width: 100%;
position: absolute;
margin-left: 33%;
margin-top: 38%;
}
.temptext:hover {
background: url("my-img2.png");
background-size: 35% 33%;
background-repeat: no-repeat;
background-position-x: 3.6px;
background-position-y: -.35px;
}
I've attempted using background-position-x/y to specify the pixel shift, which eliminated it almost entirely, however I've now manually gotten down to the millionths in decimal places and it's still shifting every-so-slightly. Any advice or alternative solutions?
You should combine the two images into a single sprite to avoid the flicker.
Ok, I figured out what the problem was. Because the pixel dimensions of the two images were exactly the same (1600x750), the image was shifting itself because it read it as 'bigger' than the initial image. When I changed the on-hover image canvas size to one pixel smaller than the original image, the shift was eliminated. This is apparently a problem with text that changes font-size and similar effects when hovered over as well.
Say, like in this example here: http://www.electrictoolbox.com/examples/wide-background-image.html
When I do it, I end up getting white borders around the image no matter what I do. What am I doing wrong?
If you're hoping to use background-image: url(...);, I don't think you can. However, if you want to play with layering, you can do something like this:
<img class="bg" src="..." />
And then some CSS:
.bg
{
width: 100%;
z-index: 0;
}
You can now layer content above the stretched image by playing with z-indexes and such. One quick note, the image can't be contained in any other elements for the width: 100%; to apply to the whole page.
Here's a quick demo if you can't rely on background-size: http://jsfiddle.net/bB3Uc/
Background images, ideally, are always done with CSS. All other images are done with html. This will span the whole background of your site.
body {
background: url('../images/cat.ong');
background-size: cover;
background-position: center;
background-attachment: fixed;
}
You set the CSS to :
#elementID {
background: black url(http://www.electrictoolbox.com/images/rangitoto-3072x200.jpg) center no-repeat;
height: 200px;
}
It centers the image, but does not scale it.
FIDDLE
In newer browsers you can use the background-size property and do:
#elementID {
height: 200px;
width: 100%;
background: black url(http://www.electrictoolbox.com/images/rangitoto-3072x200.jpg) no-repeat;
background-size: 100% 100%;
}
FIDDLE
Other than that, a regular image is one way to do it, but then it's not really a background image.
the problem is the margin of body his default value is margin: 8px
and i make it margin : 0 so the image stretching and there is no white places
Alright, for my site users/members have an option to upload/link a custom image to use for the start page of my site. This works well with nearly all new browsers that support background-size. But does not fill in the entire div section with the image if the browser does not support css3 background-size.
Yesterday I had a chance to test my site on a 25"inch monitor and ended up realizing the image display part failed. What ended up happening is that the image was shifted to the left.
Today checking the code I forgot that I had this line in "background-position: top left;" but I remembered why I left it in the code, the moment I add "top center" or just "top" the background is still displayed however there is like 6 - 10 px white gab to the left of it. I tried using left: 0px; but can't get it to work since I am using position: fixed; and if I change it to position: absolute it displays full image which ends up creating a scroll bar on the bottom.
Here is the code for the CSS part I am using at the moment
#cpBackgroundImg {
background-repeat: no-repeat;
background-clip: border-box;
background-origin: padding-box;
background-attachment: fixed;
background-position: top left;
position:fixed;
z-index:-10;
margin-right: 0px;
margin-left: 0px;
background-size:100%;
}
and here is the other part of the code which actually displays the image
<div style="display: block; opacity: 0.99999; width: 1600px; height: auto; left: 0px; right: 0px; top: 0px; bottom: 0px; background-image: url(<?php echo base64_decode($_COOKIE['phx_utmc_session']); ?>);" id="cpBackgroundImg"></div>
Can some one tell me how to fix this problem?
- Thanks
http://jsfiddle.net/Hnwjg/6/
width: 1600px;
Is that monitor you tested it on have a resolution larger than 1600? If so the div looks like it's limiting the width of your image to 1600. meaning there will be white space on the right of the image?
Just a thought.