I'm facing an odd problem. I have a document with a gradient background color.
<body class="loginbackground">
.loginbackground {
background: #64889A; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#DCDCDC', endColorstr='#64889A'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#DCDCDC), to(#64889A)); /* for webkit browsers */
background: -moz-linear-gradient(top, #DCDCDC, #64889A); /* for firefox 3.6+ */
width: 100%;
height: 100%;
}
When first building the page I hadn't set a doctype (yes my bad, but it is still in pre-pre-alpha!)
I added <!DOCTYPE html> to my html file, and bam, the background gradient disappears.
It works fine in Chrome and IE. This is only broken in Firefox. I'm using Aurora (13a0.2). If I remove the line -moz-linear-gradient, then it shows the default background color (no gradient).
Am I doing something wrong or is it actually a bug in Firefox?
** UPDATE **
If I give a background-size: 1000px 1000px then it works, somewhat. I would like to give 100% 100% or auto, but that doesn't work. Giving a fixed size means that it is screen resolution dependent.
Your problem is that per spec the gradient sizing box is the box of the element the background style is on. And in standards mode, the height of your body is 0 because you didn't set height: 100% on the <html>. You can see this if you put a border on the body.
Try replacing you css with this variant:
background: -moz-linear-gradient(top, #dcdcdc 0%, #64889a 100%);
The place I go to when I need cross-browser gradient is this: http://www.colorzilla.com/gradient-editor/
Related
This question already has answers here:
Background image is cut off at bottom or right when scrolling viewport
(5 answers)
Closed 7 years ago.
(This is a better rephrase of my initial question - you can mark the other one as a duplicate of this one. Thanks)
I saw quite a few similar questions but could not find a fix. Open this sample and resize the browser to make its height shorter than the main div height (~400 pixels).
When scrolling down, the background image attached to the body is cut off.
html {
height: 100%;
color: white;
}
body {
height:100%;
padding: 0;
margin: 0;
background:url(bg.jpg) repeat-x;
background-position: bottom;
background-size: contain;
}
/*#pageWrap { background:url(bg.jpg) repeat-x;}*/
#page {
height:100%;
}
#divHeader {
width:100%;
height:115px;
}
#divMain {
width:600px;
height:400px;
border: solid 1px brown;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="pageWrap">
<div id="page">
<div id="divHeader">Header</div>
<div id="divMain">Main</div>
<div id="divFooter"><p>All Rights Reserved. Blabla® 2015</p></div>
</div>
</div>
</body>
</html>
I tried to move the background image to the pageWrap div as someone suggested.
It solves the vertical scroll problem, but creates a similar problem horizontally: When the window is too narrow and you scroll left, the image is cut off on the right.
Any real solution?
Perhaps you could remove the height:100% from HTML, BODY and #page, and then set background-color on the body to #3E3E3E (in this example).
The difference is that the background image would not stretch all the way down, but it would remove the scrolling problems.
Height:100% only applies to 100% of the height of the browser window, not the height of the page within the browser window - that's why you;re getting the white area below when you scroll down.
I would suggest replacing your background image with a CSS gradient, this might seem difficult but there is a fantastic tool that does it all for you (they also show a browser support table below the tool!)
The output CSS for a gradient that you'd want looks like this:
background: rgb(0,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(204,204,204,1) 96%, rgba(204,204,204,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(204,204,204,1) 96%,rgba(204,204,204,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(204,204,204,1) 96%,rgba(204,204,204,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
Furthermore, you might want to remove height: 100% on the html and body for min-height: 100% since you'll want this gradient to stretch out over the length of this page.
The reasons you'd want to use a gradient over an image is just purely because it replaces a request to a ~100-300kb image with no request and only ~100-300b added to your CSS which I think is a good trade off against almost any criteria.
The tool also has support for importing an image, you can basically take your image, upload it and get a gradient out of it that comes closer to a perfect result than you could ever do by hand.
I've searched and searched, but I can't, for the life of me, figure out what is wrong with my background attachment. I can't get it to break free from the div. For brevity, here is a fiddle for you to observe and test. I'm working with Skrollr.js which might be a factor FYI.
The second panel that moves up over the first is the one I'm referring to. And by "break free" I mean that the #panel-2 background is traveling with the #panel-2 div to cover the first panel instead of the #panel-2 background being fixed at the top of the viewport and being "revealed" by the #panel-2 div moving into the viewport.
<div id="panel-2" class="panel" data-0="transform:translate3d(0%,100%,0)" data-200p="transform:translate3d(0%,0%,0)"></div>
#panel-2 {
background: url('http://dev.synergexis.com/skp/example-img/panel-2-bg.jpg') no-repeat center center;
background-size: cover;
background-attachment:fixed;
transform:translateZ(0%, 100%, 0);
-ms-transform:translateZ(0%, 100%, 0);
/* IE */
-moz-transform:translateZ(0%, 100%, 0);
/* Firefox */
-webkit-transform:translate3d(0%, 100%, 0);
/* Safari Chrome */
-o-transform:translateZ(0%, 100%, 0);
/* Opera */
z-index:-2;
}
Here is an example of the behavior. Given by the amazing, I Hate Tomatoes', Petr Tichy... the second section right below the header with the red and blue stars and dots is the effect I would like to mimic.
Try to avoid using css 3dtranslations, the working skrollr demo you are trying to mimic doesn't use them. I have read some complaints about css 3dtranslations ignoring fixing content to viewport before. Once you remove them, the background-attachment should start working.
I am testing a site on localhost with Firefox and now I am seeing that the background image and color I gave isn't showing at all in Chrome. In IE it is showing in IE9 but not in IE8 or 7... So In Chrome, IE7 and IE8 I am neither seeing an image as a color...
What might be the problem? I am using both a color as a image. This is the code I am using:
background: url("http://localhost/test/wp-content/uploads/2013/01/bg.png") no-repeat scroll left 550px center #222;
PS I am using a left 550px because I don't want to use right -80px... Using a minus isn't good I am told...
Try putting the color before the url
according to W3C:
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];
So your code should look like this (I removed the double left property, if it's a positive number than it's automatically pushing 550px from the left):
background: #222 url("http://localhost/test/wp-content/uploads/2013/01/bg.png") no-repeat scroll 550px center;
I have the following template that I am trying to get working, I have taken the liberty to add different color backgrounds to each div for debugging, basically I have three divs that are different backgrounds and these backgrounds need to have a glow in the center. To do this I tried setting an absolutely positioned container with 10% opacity. However it overlays everything and ignores z-index.
I know I am missing something simple, but I have been looking at this for too long.
http://fwuse.com/n/ No glow, the colors are not the design they are their for debugging.
http://fwuse.com/n/glow.html Glow container added, only the menu sticks out, everything else is hidden.
http://fwuse.com/n/glow-opacity.html Glow container with opacity, notice none of the links can be clicked.
Why not just use CSS for your glow?
#radial-center {
/* fallback */
background-color: #2F2727;
background-position: center center;
background-repeat: no-repeat;
/* Safari 4-5, Chrome 1-9 */
/* Can't specify a percentage size? Laaaaaame. */
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#1a82f7), to(#2F2727));
/* Safari 5.1+, Chrome 10+ */
background: -webkit-radial-gradient(circle, #1a82f7, #2F2727);
/* Firefox 3.6+ */
background: -moz-radial-gradient(circle, #1a82f7, #2F2727);
/* IE 10 */
background: -ms-radial-gradient(circle, #1a82f7, #2F2727);
/* IE < 8 Linear gradient fallback */
filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a82f7, endColorstr=#2F2727, GradientType=1)";
/* IE 8/9 Linear gradient fallback */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1a82f7, endColorstr=#2F2727, GradientType=1)";
/* Opera cannot do radial gradients yet */
}
Demo: http://jsfiddle.net/AlienWebguy/49d5g/
If you can make the content div not have a background color(background:transparent ?) and have z-index 3, and the underlying "10% opacity" div have z-index 2, it will work. I am not sure if background:transparent is a property in CSS however ;)
#content-bg has a lower z-index than the glow which is covering the whole page, therefore consuming all the clicks for the content. Changing the z-index for #content-bg to 3 seemed to bring it to the front enough to be clicked while not affecting the glow effect.
I fixed it, I had to set the #pagecontainer z-index and set the background divs to z-index:auto. I set header to z-index: 501, content to z-index: 502 and footer to z-index 503, #glow was set to z-index: 1.
As confusing as this is, it works, any idea why?
http://fwuse.com/no/
What's this?
And how do I get rid of it? Actual webpage here.
Remove min-width: 640px from your .singleinfo css class
The min-width for the singleinfo class is set to 640px while the backgroundimage is only 630px wide. You can set no-repeat on the background or change the min-width to 630px.
It's the background of div.singleinfo repeating. To get rid of it, add no-repeat to the background property, so it becomes:
background: #F7F7F7 url(images/macmet.jpg) bottom left no-repeat;
Apart from defaulting to a repeating background, you've also set the background colour inconsistent with the remainder of the page.
.singleinfo { background: #F4F4F4 url(images/macmet.jpg) bottom left no-repeat; }
Appears correctly in Chrome 11 on Windows.
Change your style.css to get this:
.singleinfo {
background: url("images/macmet.jpg") no-repeat scroll left bottom #F4F4F4;
font: 12px Georgia,Arial,century gothic,verdana,sans-serif;
margin: 0;
max-height: 20px;
min-width: 640px;
padding: 5px 0 15px;
}
This fix was tested and works OK on:
Mozilla Firefox 4.0.1
Internet Explorer 9.0.8112.16421
Opera 11.10.2092
Google Chrome 11.0.696.60
change the background property of your class .singleinfo to >
background: url("images/macmet.jpg") no-repeat scroll left bottom #F7F7F7