Tried to set background image for body's id.Below the css is not working in IE.It is working only in chrome and firefox but not working in IE.How to resolve this issue.If anyone know please help to find solution.
HTML:
<body id="bg"></body>
CSS:
#bg{
background:url(/test/images/bg.png) repeat scroll 0 0;
position:fixed;
}
Related
HTML
<div class="bg">
// some code and text nothing crazy
</div>
css
.bg {
background-image: url("color.jpg");
background-position: top;
margin-top: -75px;
}
I'm getting a white margin on both sides between my background image and the edge of the browser.Just trying to get my background image to stretch to the edge... at this point Ive tried a plethora of combos of ...
background position, just reg position: relative/fixed etc. none seem to work. I also tried max-width and that didnt seem to help. Feel like I'm missing something obvious?
Try to remove padding and margin to your body :
html, body {
margin:0;
padding:0;
}
ahhhhh i had a container-fluid in my bootstrap navbar causing the issue, although I believe the 0 margin/padding would have fixed it. learn from my noob mistake everyone!! :)
My question is how I via. the CSS can force my webpage to show a horizontal scroolbar on the frontpage.
I've triede looking for overflow-x: but can't seem to find the right place.
My webpage: http://holtumdata.dk
I've had customers who have trouble finding the "Download" page, when they're on computers with small screens. (open browser in window mode, to see what I mean.)
Thanks in advance!
Here looking at your page I can see that you have a HTML line like this
<div id="portfolio_viewport" style=" overflow: hidden; outline: none; cursor: -webkit-grab;" tabindex="5000">
Remove the overflow:hidden in element's style
but since CSS is generated from module we can override it locally by using script like
<style media="screen" type="text/css">
#portfolio_container {
overflow-x: scroll !important;
}
</style>
I check your site.. By applying overflow-x:scroll
your problem may be solved .
In CSS :
body{
overflow-x:scroll;
}
You put it in the html{} in your css file.
And a mozilla firefox specific one: -moz-scrollbars-horizontal
Like this:
html{
overflow-x:scroll;
}
So this morning I got an automatic update to IE 11, after checking my eyes it appears that some of my background images are blurry.
I had to check that it was not my image causing the problem, so after firing up Chrome, they were nice and crisp again...
I am completely baffled.
I've now uninstalled the IE11 update and they are once again nice and crisp in IE10... Has anyone else encountered this?
I've included a screen shot showing the images in the different browsers.
Here is a link to a jsfiddle, I don't have IE11 any longer to test but its the same markup and CSS that I am using: http://jsfiddle.net/3g52E/
Well i can see what is causing this problem. It's the border-radius of your ._ui.
Now i can't tell you why this happens. However if you want to fix this you can or don't use border-radius or, which is a better solution i my opinion, use the <img> tag to generate the background.
Use image element
<img src="http://i.imgur.com/DauuVHW.png" />
Now to cut-off your image you can just use position: relative;, position: absolute; and a overflow: hidden;:
.block1 > div
{
position: relative;
overflow: hidden;
}
This will add the properties on ._ui _bre and ._ui _com.
Where the basic image properties are:
img
{
position: absolute;
left: 2px;
}
Now you can just use the top and bottom offset for the the image positioning. Where as you used background-position before:
._bre._ui img
{
top: -68px;
}
._com._ui img
{
top: -24px;
}
This way your image is not a part of the element which has border-radius anymore, which caused this problem. They have a more clear seperation now; 2 different elements.
jsFiddle
There is probably more elegant way to fix blurry images in IE 11.
In our app we have icons on buttons with round corners. Removing round corners or using <img> for icons were not options.
However, what worked for us was "classic" images optimization for retina displays, i.e. saving button background images with twice larger resolution and then specifying original size in background-size.
Looks great in IE 11 and on retina displays.
According to this:How to write a CSS hack for IE 11?
I added this code to my CSS:
#media all and (-ms-high-contrast:none){
*::-ms-backdrop, .my_elements_with_border_radius { border-radius: 0 }
}
With this browser hack the borders are not round anymore in IE11 but at least the background images are not blurry anymore. In any other browsers they are still round.
I have two styles defined:
img.feedback-sprite-22{
display:block;
background:url(../img/feedback-sprite-22.png) 0px 0px scroll;
height:22px;
border:0 !important;
padding:0;
margin:0 !important;
z-index:0;
}
img.feedback-sprite-22:hover{
background-position:0px -22px;
}
img.fb {
display:inline;
margin:auto 0;
border: none !important;
vertical-align: middle;
}
And I display the image like so:
<img class='fb feedback-sprite-22' height='22' width='65'>
Works great in ff & chrome but not ie (i've tested ie10 and ie8). IE shows the image (is it a simple gradient), but also shows the square img missing box (see below). Any ideas how to fix this? Thanks in advance.
Because you have no src in your img tag, which is needed.
Use div <div class="fb feedback-sprite-22"></div> instead of img. And define width and height in css. If you realy want to do it using css...
But in my opinion you should use clear img - like <img src="/img/feedback-sprite-22.png" alt=""> and not background in css for element like this.
If its just a gradient, why not using a CSS, gradient?
http://www.colorzilla.com/gradient-editor/
With support for every broweser including IE6-10
So the answer, I've discovered, as Choinek pointed out, is that IMG obviously has to have 'src' defined for IE. I assigned it to blank.gif and all is good. Since I already use a blank.gif on the site, it isn't another image to load.
However, I really like the idea of using a CSS gradient. This would reduce the number of images (always good).
My site design requires a background image running across the top of the page. You can see what it is supposed to look like in this screenshot. Link to my site.
Unfortunately, I used Firefox to check my work while putting this together. I used FireFox, because it has Firebug. The site looks right in Firefox, but wrong in Safari, Chrome, and IE. In Safari, Chrome, and IE, the background body wrapper background image is below the menu. Example screenshot where background at top is wrong.
Is there an easy fix to the background image, so it will work in all browsers, or do I have to take a few steps backward to fix some basic problems in my markup?
The margin on #nav is collapsing (https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing) because its parent (#wrapper) has no top margin, padding, or border to contain it. A quick-and-dirty fix for your problem would be to add padding-top: 1px; to your #wrapper CSS.
Change the margin property of #nav and add padding to #wrapper equal to the height of your background image.
#nav {
margin: 0 auto;
}
#wrapper {
padding-top: 85px;
}