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.
Related
On this page I have 2 background images:
(1) A blue sunburst that is set as a background image of <html>
html {
background: url("BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg") no-repeat fixed center center / 100% auto transparent;
outline: 0 none !important;
}
(2) An image showing a crowd of arms in the air that appears at the bottom of every page. I use the sticky footer solution to make this stick to the bottom of each page
Everything works fine at normal browser widths, but once the browser width is below about 500px a white space starts appearing at the top:
and at the bottom
of every page. Previously I used
background-size: cover;
for the sunburst image, but this caused the website to crash the browser on iOS 6 (seriously), so I need to find a way to fix this without using this rule.
The white space is due to the browser positioning the image center center as defined in the CSS.
html {
background: url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size: 100%;
outline: 0!important;
}
I thought the solution would be just setting background-size: 100% 100% as the current setting of just background-size: 100%; is 100% width and auto height. But it's bugged in Chrome - background-size:100% 100%; doesn't work properly in Chrome. There is a workaround answer on that question that might help.
However, if the background-size: 100%; is dropped for width < 500px, perhaps in one of your #media rules, then the background fills the page as expected. The rule is still required when the window is greater than the width of the image to stretch the image.
If you're not opposed to a JS solution, you could try using Backstretch.
Set the background-size to something larger than 100%. I think 200-250% will cover that area.
background-size:220%;
One side effect this has is the fact that it causes slight lag due to the size.
Here, Have this solution...
In this file...
http://festivals.ie/static/C5z61WeZeCfyTRbmu6lNPsxXxwhibmxExq6ADwtSPjh.css
On line no 793,
this code is there in the last part of that line...
html{background:url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size:100%;
outline:0!important;}
Add this property : background-position: 0px 0px;
Making the code:
html{background:url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size:100%;
outline:0!important;
background-position: 0px 0px;}
And fyi, as andyb pointed out the white space is the image leaving its top position to be centered, thereby making it look like a white space starting to appear..
Hope you get the point.
Regards
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/
How to design
1) a vertical gradient background with unfixed height,
2) a vertical gradient background with fixed height (say 600px, from blue to white to green), then the rest has the same green color?
update
Now the new design is from the top to the bottom, 120px fixed height from blue to white, then unfixed height for white, and then 120px fixed height from white to green. How to code that?
There is a way to do it, you will want to take advantage of the available background properties:
body {
background-color: green;
background-image: linear-gradient(blue, white, green);
background-repeat: no-repeat;
background-size: 100% 600px;
}
Live example: http://jsfiddle.net/sl1dr/PxNhY/
If you want an unfixed height then replace 600px with 100%.
EDIT: Here is the new solution according to your changes: http://jsfiddle.net/sl1dr/EtYLZ/
You can try crossbrowser (ie5.5+) linerar gradient generator
This Link:
Css Gradient From Green To White To Blue
Or you can use this link directly: Gradient Generator for generating cross-browser Css 3.0 Backgrounds.
You can generate Professional gradients and get the code for pasting in your own css file.
You must know that the css may not support some versions of IE
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/
Hey all! I'm in the process of setting up my website and I'm trying to find a way to have my background image (or any image) to re-size it self according to content.
My background consist of 4 corners, 4 edges and a fill for the middle. Is it possible to have it re-size? Example of how i want to use it:
My background image currently supports about 4 paragraphs and im at the bottom. What if i want 7-8 paragraphs? Will i have to manually remake the image to be longer or can i have it take the left edge, right edge, bottom corners and bottom edge pictures and and it down? I really hope that made sense haha.
I don't want to stretch the image because it loses its resolution and looks terrible.
Thanks for your time.
No.
Make the corners and edges separate images. Top/bottom edges should be tileable horizontally; left/right edges vertically.
Then have a "middle" image as your background that either tiles or is scaled in some other way. This answer may help you there.
You can do this using css3 properties. Not all browsers support this yet!
.foo {
background-image: url(bg-image.png);
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
-webkit-background-size: 100% 100%; /* Safari 3.0, Chrome */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */
}
https://developer.mozilla.org/en/CSS/-moz-background-size