For some reason, background images are not showing up at all in IE11 (Windows 7 Pro).
.home {
position:relative;
height: 620px;
background-image: url(/images/bg_home3.jpg);
background-position: 540px 190px;
background-repeat: no-repeat;
}
Any clues?
If you are trying to set background to HTML5 element there is a chance that it doesn't have some default style in IE11. For example if the element is main try to set display: block to it. You may also try to set width, but without seeing more of your code can't help you more. Look the example below.
.home {
display: block;
width: 100%;
position:relative;
height: 620px;
background-image: url("/images/bg_home3.jpg");
background-position: 540px 190px;
background-repeat: no-repeat;
}
necessary use width: 100px; <= you size px
.home {
position:relative;
height: 620px;
width: 200px;
background-image: url('/images/bg_home3.jpg');
background-position: 540px 190px;
background-repeat: no-repeat;
}
Use a png image as it seems IE 11 cannot display jpg with non web colors.
I think with two easy steps you can eliminate the problem:
Set display: block; The display property specifies the display behavior on your page. IE 8 and upper versions fully supports this property.
Put your url between quotation marks ("").
background-image: url("/images/something.jpg");
I found setting the background size of the image made it display in IE11.
I also had to set the width and height. Setting the value of these attributes to auto it didn't work.
Related
Ok this is really stumping me, probably because i don't understand it 100%. I have the following code to display a responsive background-image on the header:
.home .site-header-main:before{
display: block;
max-width: 100%;
max-height: 100%;
background-color: transparent;
background-image: url('/images/home-menu/home_honey_drip.png');
background-repeat: no-repeat;
background-size: 100%;
padding-top: 35%;
}
What i want it to do is display the 'home_honey_drip.png' under the menu text and then 'overflow' it over the top of the body content. I have tried adding position: absolute; However the image disappears.
Thank you in advance.
I think you need to use position relative and move the content of the menu to top.
You can do this using two divs, one with the image and other with the menu content.
#menu{
top:-100px;
position: relative;
color:white;
}
You can check my jsfiddle. Just add the rest of the css you need to your image.
I'm trying to set the size (both width and height) of a div to match it's background image size, but I can't get it working.
The background image size has to be in percentages, because I'm dealing with a responsive website. On smaller screens, the background should be displayed completely (with less width, but still proportional), and the div who has the image should follow that size.
I tried various values of the background-size, such as auto 100%, cover, contain, etc. but nothing did the trick.
There's a similar question here about this: scale div to background image size but it didn't solve my problem either.
I'd really appreciate if someone knows how to do it.
EDIT:
I made a fiddle to show the behavior: http://jsfiddle.net/osv1v9re/5/
This line is what is making the background image so small:
background-size: auto 100%;
But if it is removed is removed, the background will fill the proper width, but not the height.
tag cannot adapt to background-image size, you need to use an tag and choose between height: auto for the div or javascript
// **** Problem ****
// Wrong html :
<div class="my_class"><div>
// with css :
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
}
//**** Solution ****
// use css:
.my_class {
width: 100%;
height: 100%;
background-image: url(/images/my-image.jpg);
background-size: contain;
}
*{
padding: 0;
margin: 0;
}
div{
width: 100%;
}
div figure{
padding-top: 36.56%; /* 702px/1920px = 0.3656 */
display: block;
background: url("https://st.fl.ru/images/landing/bg2.jpg") no-repeat center top;
background-size: cover;
}
<div>
<figure></figure>
</div>
you can have a responsive height using the padding-bottom or padding-top
because you can't fix an height property in '%' with a width in '%'.
div{
background-image: url(url);
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center;
margin: 0 auto;
width: 100%;
padding-bottom: heightPicure / widthPicture + %; //do it manually or using scss rules
}
I was looking for a solution to make my opening background image to be 100% of the viewport and after using Josh powel''s answer here Page height to 100% of viewport? it works on chrome on mac but not on any other browser (on mac or windows) When I say 'it works on chrome on mac', it works in most instances however if I stretch the browser too high, it doesn't fit to cover and I see my next bit of content so it's like it only works for heights up to x...
here's my code:
<section class="intro">
<div class="intro-body">
</div>
</section>
.intro {
display: table;
width: 100%;
height: 100%;
padding: 350px 0 330px;
text-align: center;
color: #fff;
position: relative;
background: url(http://www.wallsave.com/wallpapers/1920x1200/plain-blue-gradient/2567400/plain-blue-gradient-pc-mac-hd-2567400.jpg) no-repeat center;
background-size:cover;
}
.intro-page {
padding: 150px 0 130px;
background: url(http://www.wallsave.com/wallpapers/1920x1200/plain-blue-gradient/2567400/plain-blue-gradient-pc-mac-hd-2567400.jpg) no-repeat center;
background-size: cover;
}
function windowH() {
var wH = $(window).height();
$('.intro, .intro-page').css({height: wH});
}
Fiddle here http://jsfiddle.net/9h98f/1/
If anyone can shed any light, that'd be great.
In order to make an element 100% height of the page, you must also have:
html,body { height: 100%; min-height: 100%; }
It's much better and more reliably to do this in CSS than by using JS.
Alternatively, you could just put the background image on the body (with background-size: cover like you are using).
Firefox has a curious bug relating to background-attachment and background-size. I call it a bug, I suspect it isn't, but this renders the way I think it should in the other major browsers (emphasis on I think). The desired effect is to size a vertically repeating background to 100% width while maintaining image proportion.
Here's my original CSS, in this version, the background won't render at all for firefox (even with firefox specific background tags).
body {
background: #000 url('../background.jpg') left top repeat-y;
background-attachment: scroll;
background-size: 100% auto;
}
Changing background-attachment: scroll; to background-attachment: fixed; causes the background to render, but the "floating background" behavior is not desired.
[UPDATE]
Removing background position causes the image to render correctly again.
e.g.
body {
background: #000 url('../background.jpg') repeat-y;
background-size: 100% auto;
}
This is actually a problematic fix because my position values were actually 'left 113px'. I can fix this by applying the background to a wrapping div below the site header instead of the body element, but the fact remains that Firefox has trouble rendering background images with background-size: 100% auto; when position values are used and attachment is scroll.
[UPDATE 2]
I realize the bug only shows up when an additional piece of CSS is present. That's not to say the additional piece of CSS was at fault (it isn't), it's to say that this Firefox specific rendering bug is somehow caused by it.
The additional CSS (used for creating layouts with flexible 100% height)
html { width: 100%; height: 100%; position: absolute; }
And the complete body CSS to go with to replicate the bug
body {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
margin: 0;
background: #000 url('image.jpg') top left repeat-y;
background-size: 100% auto;
}
[SOLUTION]
I solved my problem by creating an additional wrapped div immediately within the body and attaching the background there without specifying position properties.
#wrapper {
position: absolute;
min-height: 100%;
width: 100%;
background: #000 url('image.jpg') repeat-y;
background-size: 100% auto;
}
But because I now have an additional wrapper anyway, I can go ahead and remove the position, height, and width attributes from html, rendering the bug moot and allowing me to set the position of the background as well.
I solved my problem by creating an additional wrapped div immediately within the body and attaching the background there without specifying position properties.
#wrapper {
position: absolute;
min-height: 100%;
width: 100%;
background: #000 url('image.jpg') repeat-y;
background-size: 100% auto;
}
But because I now have an additional wrapper anyway, I can go ahead and remove the position, height, and width attributes from html, rendering the bug moot and allowing me to set the position of the background as well. (see UPDATE 2 in my original question)
I'm designing a clean style to use in some web apps. And I've come across a IE bug (always the same).
Well its pretty simple. I have a gradient background, and on top of it a rectangle with no border and its filled with nothing and with a shadow around it, giving the illusion that its on top of the background, as you can see in the snapshot.
Its displayed well in all browsers except IE. IE displays like this.
IE increases about 4 px to the top div with the class "content-top-shadow". And it shouldn't. I have used margin and padding 0 to fix it and no luck.
PS: The png's have transparency.
Any idea how can i fix this bug, or whats wrong in the CSS?
Thanks.
Here is the code:
HTML
<div class="content-holder">
<div class="content-center">
<div class="content-top-shadow"></div>
<div class="content-center-holder"></div>
<div class="content-bottom-shadow"></div>
</div>
</div>
CSS
.content-holder {
width: 100%;
height: 570px; /*once complete change to auto*/
background-image: url(images/content-holder-bg.png);
background-repeat: repeat-x;
padding-top: 20px;
text-align: center; /*IE Bug Fix to Center the other divs inside this one*/
}
.content-center {
width: 918px;
height: auto;
margin-left: auto;
margin-right: auto;
}
.content-top-shadow {
width: 918px;
height: 9px;
background-image: url(images/content-top-shadow-bg.png);
background-repeat: no-repeat;
}
.content-center-holder {
width: 918px;
height: 200px; /*once complete change to auto*/
background-image: url(images/content-center-holder-bg.png);
background-repeat: repeat-y;
}
.content-bottom-shadow {
width: 918px;
height: 9px;
background-image: url(images/content-bottom-shadow-bg.png);
background-repeat: no-repeat;
}
IE thinks your div should be bigger than 9px, because of text size, even if there is no text in it (!), so you need to set
font-size:1px;
or something like that, on the top and bottom divs.
Here's something that helps me overcome cross-browser incompatibilites when it comes to empty spaces especially within DIVs and TDs. Place this as the sole content of the empty space, while making sure your spacer.gif image is a 1px x 1px transparent dot. Cheers!
<div style="width:1px;height:1px;visibility:hidden;overflow:hidden;clip:rect(1px,1px,1px,1px);color:#FFFFFF;font-size:1px;"><img src="/images/spacer.gif"></div>