I find issue with background attachment in firefox.
I want to make my banner background fixed ( http://inkerkam.so-use.ru/ ), but it doesn`t work in firefox: background displayed, but it scrolls, however in chrome it works normally. And another moment, in another block below '.content' it works normally too.
my html:
<div class="banner">
...
</div>
...
<div class="content">
....
</div>
my css:
.banner {
background: url(/template/img/banner.jpg) no-repeat fixed left top;
}
.content {
background: url(/template/img/banner.jpg) 0px -690px fixed;
padding: 80px 0 120px 0;
}
Maybe somebody know how to solve this problem?
Firefox version is the last one. Updates today.
p.s. sorry for my bad english
Even without having the rest of the code I am almost certain that the problem is a transform:translate property either in the element with the background or a parent element. When this property is applied - for any axis, either X, Y or Z, background-attachment:fixed is disabled.
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!! :)
I'm building a website that has a full width background image in the header that resizes with the page. There is an unusual flickering horizontal line that appears under the image when it is resized in Firefox. The line does not appear at full with, but blinks on and off when the size is changed. The line appears at the bottom of the background image, not the bottom of the header element.
It appears in the MacOS build of Firefox only when I tested it in OSX 10.8.4, Firefox 23.0. The problem did not appear with Windows 8, Firefox 23.0.1, or in other browsers that I have tested.
Here is the code on my header:
<header>
<h1><span>Sound Soups on Madison - Healthy & Convenient Alternatives for Your Busy Work Week</span><img src="images/sound-soups.jpg" id="logo" alt="Sound Soups"></h1>
<nav id="nav-main">
<?php echo makeLinks($nav1); ?>
</nav>
</header>
header{
padding:0 2.12765957% 35px;
overflow:hidden;
background-image:url('../images/bg-header.jpg');
background-repeat:no-repeat;
-webkit-background-size: 100%;
-moz-background-size: 100%;
-o-background-size: 100%;
background-size: 100%;
}
I've tried using cover instead of 100% for the background size, and putting padding or a border under the header. Googling the problem didn't turn up anything. Thanks in advance if anyone knows the answer here.
EDIT:
The issue seems to be related to how FireFox scales the background image. The following seems to fix it for me with FireFox 23.0.1 , OSX 10.8.4
In style.css, try changing the background-size property in the header rule from 100% auto to 99.99% auto, ie
header {
background-image: url("../images/bg-header.jpg");
background-repeat: no-repeat;
background-size: 99.99% auto;
margin: 0;
overflow: hidden;
padding: 0 2.12766% 35px;
}
If I'm understanding your question correctly, check the top of the stylesheet # http://soundsoups.julie-edwards.com/css/responsive.css
You have
header{
background-image:url('../images/none.png');
padding-bottom:15px;
border-bottom:2px solid #7a918c;
margin-bottom:20px;
}
I think the border-bottom is the cause of the problem.
Good luck!
Had the same problem for a background-sized image on the body element.
I fixed it by applying the background-sized image to a positioned div element.
If that can be of any help.
I solved this problem by converting my .jpg background image to a .png. In case anyone else runs into this and can't change background-size, try this.
I am using a div tag and I am applying css to it.
Please find below the div tag
<div class="testcss">
</div>
My css class is as follows
.testcss
{
background-image: url('images/imag2.gif');
background-repeat: repeat-y;
background-position: bottom-left;
padding-left: 10px;
padding-right: 10px;
}
The div is showing background image and displaying properly in Mozilla other browsers but it is not working in IE8 and IE9.
Even it is working fine in IE10.
There is some issue with background-repeat: repeat-y not working properly in IE8 and IE9.
Is there some way that we can fix this in IE8 and IE9.
Any help would be greatly appreciated.
Thanks in Advance.
Regards,
Rahul Rathi
I believe your syntax is wrong, and no.. it should work in IE8 and IE9 ... try:
.testcss {
background: url('images/imag2.gif') bottom left repeat-y;
padding-left: 10px;
padding-right: 10px;
}
http://jsfiddle.net/feitla/85XFu/
PS - tested in IE9... background repeated just fine. Make sure your div actually has a set height/width if it is empty.
I agree with #feitla on the fact that your syntax is wrong. You can't use bottom-left as it doesn't exist in the background property for CSS.
I also agree that you should simply use background: url('images/imag2.gif') left repeat-y as the bottom is not needed because it's already repeating in the Y axis and spanning all the height of the container.
Last but not least, you do have to set a width and a height to your element if it's empty (as in with no other markup) because otherwise you would only be able to see 20 pixels in width because of your padding left and right.
I think that the lesson to take from this is that it's safer to use shorthand styles as it makes your code cleaner and easier to read.
You would end up with:
HTML
<div class="testcss"></div>
CSS
.testcss {
background: url('images/imag2.gif') repeat-y left;
padding: 0 10px;
}
Read more about how to use shorthand code as it makes writing CSS a lot cleaner and more fun... and it's not as hard as it may seem, here's a link to this specific issue and shorthand css for background.
I am using ASP.NET Express to work on a site at cardinal14all.org.
When viewing the site in Design Mode, the background image shows fine, but not in the browser.
HTML:
<div id="content-wrap" >
CSS:
#content-wrap {
width: 1040px;
margin: 0 auto;
background: url('../Images/backingImage.png') repeat-y left top;
}
I've checked some other answers that relate to Forms Authentication and I'm not using that here so any help is appreciated.
The background image shows up just fine, the problem is that the height of the element is zero, so you can't see it.
The #content-wrap element only contains floating elements, so they don't affect the height of the element.
Add overflow: hidden; to the style for the element, and it will contain its children.
I have been busy creating my website, however in the process of testing my in-progress main page on Opera I noticed that It was adding a horizontal scroll bar. After cutting bits out of my page I noticed that if I only left a single div with the ID feature the problem would still occur. I tried searching it by couldn't find anything on it... anywhere.
Here is a link to a page exampling the problem Opera Box Shadow Bug
It is important to note that it only occurs in Opera and as part of the CSS3 Spec it is stated that box-shadow does not at height or width.
Does anybody have a easy solution for this? The only thing that I found that worked was to put a containing Div around the box shadow div, or around several divs and set overflow:hidden; , which is far from ideal.
I haven't checked Opera for Windows but it is occurring on Opera for Mac (v11.50).
I tested your file in Windows Opera and it is displaying the same way.
The only way I was able to make it work was to also wrap a div around your #feature div, add overflow:hidden, and a larger height. Here is my code
html, body {
margin: 0;
padding: 0;
}
#hidden{
height:400px;
overflow:hidden;
}
#feature {
width:100%;
height: 375px;
background: #000;
box-shadow: 0 4px 4px 4px #000;
}
<div id="hidden">
<div id="feature">
</div>
</div>
Besides this, I would use a 1px wide image with repeat.
The bug seems to be solved at least in Opera 11.60.