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
Related
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 have a slideshow on my homepage that scales to 100% width. It works perfectly on my computer (I can even resize my browser windows all the way down, in both Firefox and Safari, and it works great) but it doesn't work on my iphone (it stays too wide and adds a lot of blank space to the right of the page content).
The slideshow is an iframe. I've tried scaling the iframe with html, putting it in a div and scaling the div with css, and I've tried this: http://css-tricks.com/snippets/html/responsive-meta-tag/, but nothing seems to be working. Does anyone have any ideas I can try?
Thanks!!
website: www.silvervinedesign.com
You have pixel widths defined for the styles of this element. Therefore, it won't be responsive.
If you inspect the source of this iframe (right click and choose "Inspect Element"), you'll find that the <ul> element containing the images is getting a style="width: 4778px;" applied to it. Each <li> child is also getting an explicit pixel width style applied. When I view the source of the iframe, these style tags are not present there.
That tells me you've got some javascript function which is setting this width. Looking at your source, I'm guessing the plugin responsible is galleria, but it's hard to tell.
I have padding: 0 40px 0 40px on the main element of each page.
In chrome, the layout looks correct with the correct padding. Here the image shows the correct padding using the developer tools.
http://imgur.com/BButZht,TuOHanN
However in IE and safari, the padding is not present and the text/image are shifted to the outer body element.
http://imgur.com/BButZht,TuOHanN#1
I cant figure out why this is happening. The IE developer tools don't help me much either
Same padding issues for the home page and category pages.
www.luminoto.com
Thanks
IE does not have display:block in its browser stylesheet for the main element, so you have to add it explicitly in your stylesheet – otherwise it’ll just be treated as an inline element (and all the content will just “flow out” of it).
You can add it directly to your formatting for .photo_main – although the better place to do this would be inside a “reset” stylesheet meant to equalize such browser differences.
Not sure if that’s the same issue Safari is facing, but give it a try and see if it fixes that as well.
To start off with, I'm quite new to CSS still so I hope I haven't done anything horrendously stupid.
Basically, I have a design I'm doing built using Pure and the width is playing up in Google Chrome, while it works as intended in Firefox.
Here's a link to what I've done: http://egf.me/Rushd/rushdtest.html and screenshots:
Firefox: http://i.imgur.com/mn3GIbT.png
Chrome: http://i.imgur.com/44jLC6J.png
If you have a look at the page source, I haven't really done anything in my own CSS to change anything (I commented it all out as a check just to be sure) so I'm guessing I'm somehow using Pure wrong, since their own site renders fine on Chrome.
Also, inspecting the elements with Chrome's dev tools show that the div elements which should be next to each other have widths which add up to less than that of the parent. And nothing there seems to have buffers or padding. Also, if I manually reduce the widths to be very very slightly less, Chrome seems to magically fix everything.
The problem is that a space is rendered between your child divs.
The issue is neither margin nor padding - it's actually caused by the whitespace between your div tags in the HTML code!
Place the tags directly adjacent to eachother without any whitespace and your problem will be solved ;)
Example code
<!--whitespace in HTML = renders as a space between the divs-->
<div></div>
<div></div>
<!--no whitespace in HTML = renders edge to edge-->
<div></div><div><div>
i have a blog and i have placed a form in right but it shows different result in different browser.
The Link named "Subcribe in a reader" should be in center but it shows in left in Safari and Opera but IN FF and Ie7 Shows Perfectly in center.
And The border is 5-6 pixel going up in Opera and Safari but in FF & IE 7 it shows Perfectly fine. And In Ie6 it shows border line 10-12 pixel downside ... strange
i m using this code to adjust for postioning..
please help....
my blog : ww.techieinspire.blogspot.com
check image here
http://techie2inspire.googlepages.com/csspositioningproblem.JPG
Your markup is seriously jacked up. Use Firebug on Firefox to look at it. Here's a couple things I noticed:
You have your elements for your subscribe link inside the form above it. This is not apart of your newsletter form, so shouldn't be contained inside that form.
Your using a lot of <span>s with block elements inside them. <span>s are generally for inline content and sticking block elements (like <p>) inside could give weird results.
Check your stylesheets where your setting the left padding for ".newsletter p" this is affecting your subscription link.
Try to avoid specifying styles inline (using the style attribute).
Stop using postion:relative everywhere. Instead using padding and margins for layout your sidebar.
Generally to center something, you can do this:
.centered_thing {
margin: 0 auto;
text-align: center;
}
Edit: The marquee thing is terrible. Read about what happened to the HTML marquee tag. There's many good reasons to avoid it or Javascript knockoffs.