In Internet Explorer the background of the webpage moves without the rest of the page's content, I need the background to be fixed with the content, so when I resize it the background doesn't move, like the content inside it, here is the link to the website:
Website Link
This error only appears in Internet Explorer. I have an internet explorer-only stylesheet you can view in the source of the website.
I believe instead of (or in addition to) position: fixed, you can use
background-attachment: fixed;
Hope that helps.
Related
I have an iframe that has a background image in a div. The image displays fine with a direct link to the iframe page but when the page is displayed as an iframe (within another page) the image is not visible?
I have checked the code in Firebug and when I hover over the url in the console it just says "failed to load the given URL").
.fd-img{background-image:url('images/fd-img.jpg'); width: 342px; height: 228px; margin: 76px 0 0 205px;}
<div class="fd-img"></div>
For some reason the image displays in the iframe with no problem using an absolute url but not a relative one. I would use absolute but it is not practical at all for what I need to do.
Hope this makes sense.
Not sure why but it appears that AMPPS was the problem. I moved the exact same files to the server and everything worked fine. I was working on my local drive using AMPPS. Nothing has changed server side, I am still using Firefox and the same code so perhaps AMPPS does not like iframes? Hope this helps someone else that is having the same problem.
in css, point url link as if you were in the folder where the .css file is located
iframe's src will point to a page. The src can be set with javascript or however you like, based on event, etc. The <iframe></iframe> itself can't have a background image. You can give it dimensions, ie. width, height, scroll, etc. But content is from a source page.
I am working on a web application that allows me to insert some custom css for the front page.
I want to have a full screen background image at the start page. I understand that I can use background-size:cover which is supported in all latest version of browsers.
body {
background-image:url(/File/Publisher/Start/startpage_background.jpg);
background-repeat:no-repeat;
background-size:cover;
}
This works for latest version of Firefox and Chrome. However, it is not working in IE11. The background image does not shrink to cover the entire screen. It displays at its original size and is partially cropped off.
Using F12 to debug, I discover that if I disable either margin-top or margin-bottom (see screenshot), background-size property will work.
I do not want to modify the margin property introduced by the original CSS of the web application. Any way to resolve this problem?
I came across this as well and found that giving body any height makes the cover property have effect as long as it's not set as a percentage. For good order, min-height: 100vh should do :
http://codepen.io/anon/pen/oXmzLL?editors=010
Pretty odd since there's no issue on any other browser but that's IE for ya. Of course it's only present if the content doesn't exceed the window size (edit - it should also not have positioning that takes it out of the document flow).
Not the quickest answer by the way but it's the only topic I came across on this subject (that wasn't about legacy browser support)...
I am working on a hybrid HTML5, Jquery Mobile application using phonegap. I am currently having an issue with a background image I set using CSS. I have a CSS class (bPage) that sets the background image and color and all that and it seems to work right. The issue is when you navigate to a page that requires scrolling. Because the image is set to be in the center it moves to the center of the page, which is great. The problem is that the page loads with the image in the spot of the previous page and then it jumps to the middle. I want to make it move the image before the rest of the page loads so that it doens't look like the background jumps last in the page loading. Both pages have the class bPage on them and it is working correctly, except for the jumping. I assume that there is a way to force this to load earlier or something but have not been able to find a way.
Here is my bPage CSS code:
.bPage{
background-color: #6c6d6f;
background-image: url(../img/Backgrounds/Background.jpg);
background-repeat:no-repeat;
background-attachment:scroll;
background-position:center;
}
Thanks in advance!
My code:
html
{
background-image:url('img.png');
background-repeat:no-repeat;
background-position:center top;
background-size:cover;
}
This works perfectly on Firefox and Chrome, but on IE the image doesn't get stretched at all. It will work if I set background-attachment to "fixed" but that isn't what I want.
Every website I've looked at claims that these proprties are perfectly implement in IE, but they clearly aren't.
Troubleshoot CSS Background Size Cover
It's a bit hard to troubleshoot without seeing additional code or the website, but here are some things you can try.
Try adding background-attachment:scroll; instead of leaving it blank
Is your doctype correct, or does it have typos?
Are there other scripts or styles on the HTML tag that may be interfering/overwriting the background style?
Hit F12 to open Developer Tools, and click on the HTML tag to see what styles are listed. Toggling the CSS styles on an off for key elements on your site can help you troubleshoot the problem.
If you are in IE Developer Tools, check to see if "Document Mode" and/or "Browser Mode" are set to an older browser. (IE6, IE7 and IE8 don't recognize background-size:cover, and will show the background in its original size - Can I Use support table.)
Is your background only filling the browser window, and not expanding to cover the document page/scrollable areas? Try adding height:100%, width:100%, margin:0 and padding:0 to your HTML and BODY tags. (The default HTML and BODY tags have different styles. The HTML size is controlled by the browser window, while the BODY will wrap around the contents, regardless if the contents are less than the browser window, or expands past it.) Also try switching the background to the BODY, or the wrapper tag.
To help troubleshoot, make a basic test page with the HTML, BODY and wrapper tag only (if you use a wrapper), and see if you can get the background to function properly. This will help you narrow down the bug. Your wrapper may need a height and width too. Depending on your wireframe (DIV or CSS Table, HTML Table), it may need: min-height:100% and min-width:100%, or height:100% and width:100%.
I created a simple html page with the css you provided, did not include a background-attachment, and used <!DOCTYPE html> as the doctype. The background worked well and fully covered the screen as expected in Windows Vista/IE9, Windows 7/IE10 and Windows 8/IE11.
Side Note: Full background Stack Overflow solution for IE7 and IE8
On this site, I have a search form whose submit button has a background image
But when I view the site in IE8, the image doesn't appear.
Is there anything I can do to persuade IE8 to show the image (that doesn't cause it to disappear in other broswers)?
It appears that the image is present, but barely visible. Try setting the height and width of the input. This makes the image visible for me:
.searchform INPUT[type='submit'] {
width: 18px;
height: 18px;
}
I got it working in IE8 in this fiddle
I didn't see anywhere in your code that the background image is actually set in IE8. It shows in Chrome. Are you using multiple style sheets based on browser? Or browser specific rules in your styles?