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/
Related
My question is, how to i blur certain parts of my image?
Codepen of project (You can press Change View > Full Page to see the pen like a user would.)
It has a plain white div with background images behind it.
How could I make my .parent have a transparent background and my body have blur background?
Also how could I make the background image fit to screen?
Please comment below to ask for more information if needed.
I'm sorry if there's is already a similar post about this. This is my 2nd post on this website, so I'm sorry if I'm breaking any rules.
CodePen
Also how could I make the background image fit to screen?
Use background-size: cover.
.parent have a transparent background
Just remove the background property. Or use transparent rbga colors .
my body have blur background
Since the image is smaller than the background, this has been achieved naturally.
I used the filter property, which is applied to the entire element though. As a result, you must use an additional HTML element This could be a pseudo element, but I just used a div:
HTML: <div class="background"></div>.
CSS:
.background {
background: url("https://ak6.picdn.net/shutterstock/videos/10908707/thumb/1.jpg");
/* Apply major the blur filter. Change `1em` for more. */
-webkit-filter: blur(1em);
-moz-filter: blur(1em);
-o-filter: blur(1em);
-ms-filter: blur(1em);
filter: blur(1em);
/* Make background not move */
position: fixed;
/* ...and fill more than entire screen. Removes additional white sides from filter. */
top: -1em;
left: -1em;
right: -1em;
bottom: -1em;
/* Make the element appear behind all others */
z-index: -1;
/* Make the background cover the entire element */
background-size: cover;
}
I'm building a Grid with background images but things go wrong in Safari.
(Safari 7, 6 and 5, tested in Browserstack )
This is the website. As you can see in Chrome, FF or IE there's a grid with background image set inline.
http://fourseasonsrally.com/1
In Safari I sometimes see the background image but then it suddenly disappears.. I could not reproduce the error in other browsers.
This is what the grid looks like on chrome
UPDATE 1: Shorthand CSS
It seems that shorthand css is ignored by Safari, I removed all the shorthand properties but the problem persists.
Any idea what might be going wrong?
Thanks!
You mean header logo (FOURSEASONS RALLY) not visible in safari - changes the below css.
present css:
.header {
background: url("../img/logo.svg") no-repeat scroll center center / contain #111;
}
remove the " / contain"
.header {
background: url("../img/logo.svg") no-repeat scroll center center #111;
}
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'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/
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