This weird border sometimes appears and later disappears. I attached the code in the link along with the screenshot. Each div have similar code. Also some background images have transparent color. It is usually fine in chrome and firefox but appears in OS devices and in my android cellphone.
edit:
bug: http://postimg.org/image/kpmaqbh7x/full/
no bug: http://postimg.org/image/61eo0gq3l/
You might have to zoom in to see it.
sample code:
#div_room_107 {
width: 15.6%;
height: 100%;
float: left;
display: inline-block;
background-color: #8e8e8e;
background-image: url(/staff-app/_/img/room_corners7.png);
background-size: 100% 100%;
margin: .5% 0 .5% .5%;
}
Related
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">
I have a large dimension image that i have to scaled down through css. But in IE image getting distorted. It seems background-size property is buggy in IE.
CSS:
.img{
height: 33px;
width: 65px;
display: inline-block;
background-size: 100%;
background-repeat: no-repeat;
float: left;
background-image:url("http://www.answerplot.com/ap/media/images/croplan_logo.gif");
}
I already tried background-size:100%/cover/contain.
Working example:http://codepen.io/Mishra-Praveen/pen/revjGJ
I am fed up with this issue tried many css properties but didn't help.
Not getting any solution.
I have created a web page where on click of a button some divs are added to a table, for styling I have given background image url to div, its working on all browsers but going to iPad background image of newly created div is not showing up.
It seems that those images are not loading, Any Idea how to solve this issue?
here is my css:
.emailReply div {
background: url(/images/coach/icons/reply-email-icon.png) no-repeat;
background-size: 100% 100%;
background-position: center;
width: 35px;
height: 35px;
display: inline-block;
}
I have a DIV with height/width of 15px.
It has a background image also with height/width of 15px.
The problem is the background image is being cut off a few pixels on right and bottom when zoomed out some levels in firefox.
Here's a link and code below. Try viewing it in firefox.
<div id="custom-checkbox"></div>
#custom-checkbox
{
background: url('http://s16.postimg.org/5xacziapd/unchecked.png') no-repeat;
width: 15px;
height: 15px;
}
This is the best I can get it to display the rest is just firefoxes pixel rounding.
#custom-checkbox
{
background: url('http://s16.postimg.org/5xacziapd/unchecked.png') no-repeat;
width: 15px !important;
height: 15px !important;
display:table;
}
Hope this helps it's the best I could do.
This is my first time posting here. I have a problem. I've been trying for ages to get multiple background images to work in both Chrome/Safari and IE. Of course it works in all browsers except IE.
This my code:
#container {
width: 828px;
margin: auto;
padding: 0;
text-align: left;
position: relative;
overflow: visible;
background-image: url('images/body.png'), url('images/filler.png');
background-repeat: no-repeat, repeat-y;
}
The reason I am using two background images is because I want the illustrated part to stay at the top, and have the white page background in the same div layer repeat when more content is added.
Right now this code works perfectly in Chrome, but NEITHER of the background images show up in Internet Explorer.
Help?
If it´s possible I suggest you use two container elements.
HTML
<div id="container">
<div id="inner-container">
</div>
</div>
CSS
#container {
background: url('images/filler.png') repeat-y;
}
#inner-container {
background: transparent url('images/body.png') no-repeat left top;
}