.cornerBox {
background: url(../img/main-part.png) repeat-x top left ;
width: 400px;
height:100px;
border-radius: 80px;
padding: 0 0;
behavior: url(PIE/PIE.htc);
}
In IE8 between background images parts is spacing 1px, how to remove this space, image width is 28px I want repeat-x
I had created a jsfiddle example with your code, but used some other image. Tested it in IE8 and found there is no issues.
So I believe the problem may be with your main-part.png. The image may have a white border or something. Double check your image.
EDIT:
No issues with your image also. CLICK ctrl+0 on IE to make sure you are viewing in 100%
I had similar problem with two divs with background images next to each other. I solved it by assigning:
background-size: cover
Which stretched your image to cover the entire div
Related
I just trying to solve the problem.
CSS:
.default-img > img {
height: 100px;
width: 100%;
background: url('bg.png');
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
border: 10px solid black;
}
I have a white "Border" (Inner Border?) in the Image tag and i cant remove it.
The Black Border is set manually to show you the Problem and the Red Content is the included image.
How can i remove the white inner border from img tag
Open up a image editing software. Re-crop / re-save your source image
being rendering from 'background: url('bg.png');' background
property. So, the 'bg.png'.
Another thing you can do if you don't want to do above. Nest another
<div> around your initial .default-img <div> and set the
heights and widths to crop out the white. Make sure to set property
overflow:hidden;
In some rarer cases a white line or (outline) can be induced around
elements as a browser quirk. Test your element across browsers (and
maybe even devices too) to target if it's something browser
specific. Then target that browser and remove. ie. outline { none; }
Hope this helps, g'luck!
The img creates that border when you have a background but not a source.
To solve this issue move that background to a div :)
is it possible that that white border exists in the image itself, not in css? view the file on the black background and check.
Looks like you are showing two images there at 100%, both the source image and the background image. Do you need the background image? Could that cause the white line?
When using border-radius on an element with background image in Edge the image becomes blurred. Here is the exact same fiddle in Chrome (left column) and Edge (right).
I've also notices that the browser width plays a role in the amount of blur the image gets. When I resized the browser by a few pixels I got even more blur. Edge (left) vs Chrome (right)
Even though the blur is only slight it becoms even more visible on when the image has lower quality. Chrome (left) vs Edge (right)
Is there any way to prevent the image from being blurred?
div:first-child{
border-radius: 10px;
}
div{
box-sizing: border-box;
background-image: url('https://puu.sh/sEUpF/c8fa8f198b.png');
background-repeat: no-repeat;
background-position: center;
background-size: 24px 24px;
border: 1px solid red;
width: 30px;
height: 30px;
background-color: #fff;
}
div + div{
margin-top: 10px;
}
<div>
</div>
<div>
</div>
I notice that your png source image has dimensions of 24x24px but is being displayed by the browser at 15x18px. I'd take a punt that the browsers in-built image rendering is causing the blur as it attempts to scale the image down to fit the new scale and Edge can't compete with Chrome in this respect.
Try altering your background-image to the exact display dimensions and see if you still get blurring then.
Edit
This seems to be an Edge issue with border-radius. A nice suggestion would be to use CSS' Image-rendering property but that doesn't work for Edge (https://css-tricks.com/almanac/properties/i/image-rendering/).
I'd work around it by creating an :after pseudo element to house your icon image and position that inside your container element. Because in a container without border-radius you aren't seeing the unwanted blur
I've been dealing with a problem for a day now, and I seem not to be able to solve it. I've got four images I want to use as CSS background on the <body> tag. They are supposed to be aligned as the corners of the page.
According to multiple resources I should set the min-height on both the html and body element to 100% if I want the placement my CSS background to be relative to the entire content of my page (which extends beneath the viewport) and not just to the viewport. However, this is not working. The bottom two corner images seem to be stuck to the bottom of the viewport.
I'm using this for CSS:
html {
min-height: 100%;
height: auto;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
min-height: 100%;
height: auto;
background: url(../images/bgTopLeft.png) no-repeat left top,
url(../images/bgTopRight.png) no-repeat right top,
url(../images/bgBottomLeft.png) no-repeat left bottom,
url(../images/bgBottomRight.png) no-repeat right bottom;
}
My HTML shouldn't matter much here as I'm using the <body> tag, can't do much wrong there. The doctype is HTML5 in case anyone wants to know.
I've tried changing the setting of background-attachment to fixed, I tried the various settings of background-origin even though it doesn't seem to have to do anything with my current problem. I tried breaking up the multiple shorthand background into all the separate statements that are in there. I can't get it to work.
I'd rather not resort to sticking the bottom two corner images into a footer or a div at the bottom of my page that's just there for styling purposes. What I want, which is a <body> tag with four backgrounds positioned in the four corners of the entire page, should be possible, I just can't figure out what's going on here.
I've made a pen of what I think you're trying to achieve here:
Codepen example
I've used background-size to size the background images.
You may need to tweak this to match the size of your background images:
eg:
background-size: 40px 40px, 40px 40px, 40px 50px, 60px 60px;
depending on what size your images are.
On this site I have an auto-resizing BG but I wanted a fixed black bar at the bottom of the page.
The site looks fine when the browser is maximized but when you scale the window down and scroll down the black bar almost completely gone and it looks messed up. It is not positioning correctly.
I have tried a few things but can't figure out a solution to this. Does anybody have any ideas how I should go about this? (Maybe I am missing 1 little thing or maybe I need to start over from scratch, either way please help!)
Note: the auto size background is in the html tag and the black bottom bar is in its own separate div tag "#black_bottom"
http://graves-incorporated.com/test_sites/gm_2012/
Just remove height:100% from #black_bottom make the absolute:position div height auto.
You have everything wrapped incorrectly I believe. Why does your <div id="black_bottom> contain everything from your wrapper to your <div id="footer_wrap">?
Ok, so I think I see what you're going for now. If my understanding is correct, you want the gradient background to extend to about 70-73px above the bottom edge of your content box, where it meets the solid gray bar which extends to the bottom of the window, or just below that bottom circular G emblem, whichever is lower. I've accomplished this by removing the #black_bottom element entirely, setting a solid gray background color for the html element to match the color of your bottom bar graphic, and applied the circular gradient background to the body element. I've also removed the explicitly-defined height from #wrapper, and given it a negative margin-bottom to allow the black bar to underlap it. The styles I replaced are listed below. Hopefully this is closer to what you're after:
html {
background: #333;
}
body {
background: url(http://graves-incorporated.com/test_sites/gm_2012/images/bg.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
}
#wrapper {
width: 960px;
margin: 0 auto -136px;
top: 20px;
position: relative;
}
My web page sits in a DIV that is 960px wide, I center this DIV in the middle of the page by using the code:
html,body{background: url(images/INF_pageBg.gif) center top repeat-y #777777;text-align:center;}
#container{background-color:#ffffff;width:960px;text-align:left;margin:0 auto 0 auto;}
I need the background image of the html/body to tile down the middle of the page, which it does, however if the viewable pane in the browser is an odd number of pixels width then the centered background and centered DIV don't align together.
This is only happening in FF.
Does anybody know of a workaround?
Yeah, it's known issue. Unfortunately you only can fix div and image width, or use script to dynamically change stye.backgroundPosition property. Another trick is to put expression to the CSS class definition.
I found that by making the background image on odd number of pixels wide, the problem goes away for Firefox.
Setting padding:0px 0px 0px 1px; fixes the problem for IE.
Carlo Capocasa, Travian Games
The (most) common problem is that your background image has an odd number while your container is an even number.
I have wrote an article in my best English about where I also explain how the browser positioned your picture: check it out here.
I was able to resolve this with jQuery:
$(document).ready(function(){
$('body').css({
'margin-left': $(document).width()%2
});
});
I had the same problem.
To get the background centered, you need to have a background-image wider than the viewport. Try to use a background 2500px wide. It will force the browser to center the part of image that is viewable.
Let me know if it works for you.
What about creating a wrapper div with the same background-image.
body{ background: url(your-image.jpg) no-repeat center top; }
#wrapper{ background: url(your-image.jpg) no-repeat center top; margin: 0 auto; width: 984px; }
The wrapper has an even number, the background will keep the same position on any screen size.