So I've got an issue with trying to emulate a frosted glass effect in CSS. I'm able to get the effect to work just fine if the div in question is centered above the background image, but if I ever try to move it to a corner (i.e. so that the 'blur' effect is slightly off canvas), it results in partial failure to blur. I'm assuming that this is because it's not picking up image information to blur, just picking up empty pixels. You can see in a codepen here: codepen link
Here's the mixin that I'm currently using on the blur div:
content: " ";
background: inherit;
background-attachment: inherit;
position: absolute;
height: calc(100% + 50px);
width: calc(100% + 50px);
left: -25px;
right: 0px;
top: -25px;
bottom: 0px;
filter: blur(20px);
I'm making a div that overflows the parent div and then is offset by a particular amount in order to give a sharp blur edge.
Is there some hacky solution to let it overflow off the body while still grabbing image information from a image repeat or something?
Add this to your mixin:
transform: scale(1.75);
This makes the background width and height larger while maintaining the blur effect/sizing.
Related
I want to display some random design images on my sites background as background-image, problem now is that every time I place such an image it somehow interacts with nearby boxes etc.
I just want my design images (small icons etc) to be part of the background without getting in touch with other non-design elements like text, boxes etc.
Something like that I guess:
body {
min-height: 100vh;
position: relative;
height: auto;
width: auto;
background-image: url("/static/pattern.jpg");
background-repeat: repeat;
z-index: -10;
} -> "The actual background of the site"
.design_element_01 {
position: relative;
z-index: -1;
background-image: url("/static/xyz.png");
max-width: 100px;
} -> "The design element that should get placed onto the body background from above"
Try:
.design_element_01 {
position: absolute
/*...*/
}
In addition, you might need to change max-width to width, since a background doesn't provide width to the element.
Centering the Background
There are a few different approaches to centering the background. I'll outline one here; if it doesn't work for you, I can describe others.
Essentially, the idea is to make the .design_element_01 element itself take up the entire page. Then, background-size can be used to constrain the size of the background, and background-position can be used to center it. A basic example would be:
.design_element_01 {
position: absolute;
top: 0;
left: 0;
background: url("/static/xyz.png");
width: 100%;
height: 100%;
/* I'm using 100px here since you used max-width: 100px, but you can use whatever you want. */
background-size: 100px;
background-position: center;
background-repeat: no-repeat;
z-index: -1;
}
(Do note that I haven't tested this; you may need to tweak it.)
If you test this example, however, you will notice that this centers the background on the screen, but not necessarily the entire page. This may or may not be what you want. If not, you can change the <body> element's position property:
body {
position: relative;
}
This should cause the .design_element_01 element to be positioned relative to the <body> element.
I also created a JSFiddle example to demonstrate the solution: https://jsfiddle.net/mouqewzv/.
Finally, if you don't want your element completely centered, but just offset from the center, you could tweak the left and top properties of design_element_01 to position the background initially at the center, but then offset it.
Try setting your design_element_01 position to absolute NOT relative
and then try to place it however you want using
left:
right:
top:
bottom:
z-index:
Hope this works!
Example to best describe question:
I have an image, lets call it background (blue in example). In this example the image is
2000px wide / 1000px high
has width: 100% set and will rescale with the browser window.
I also have another image, let's call it green. It's a square which is
200px x 200px (width is 10% of the size of the background).
What I want to achieve is that I want green to rescale and reposition accordingly and fully cover the pink target position of the background, regardless of current viewport width (in other words: it should be "responsive").
The rescaling part is easy, as it's just to set the width to 10%. The positioning is a harder nut to crack. The following code is as far as I get. As I'm using position: absolute I'm removing the element from it's natural flow and top: 40% will be 40% of 0 and the green square will stay at the top.
Same example code is available as a CodePen for easier editing: http://codepen.io/emiloberg/pen/vGdNaX?editors=1100#
Is this simply not possible with pure CSS? If not, one possible workaround could be to use the image element of a svg.
.wrapper {
position: relative;
}
.bg {
position: absolute;
width: 100%;
}
.green {
position: absolute;
width: 10%;
left: 60%;
top: 40%; /* This isn't working */
}
<div class="wrapper">
<img class="bg" src="https://dl.dropboxusercontent.com/u/3378286/solayout/bg.png">
<img class="green" src="https://dl.dropboxusercontent.com/u/3378286/solayout/green.png">
</div>
(I had a hard time finding a suitable title for this question. Feel free to edit it)
Explanation: http://www.w3schools.com/css/css_positioning.asp
CSS:
.bg {
position: relative;
width: 100%;
}
What I want
two div : A page body (1) and a background block (2)
background block is always (2560 x 780) px
page body width is 820px while height is variable
background block should be behind page body
background block and page body should both be centered
background block should not move relatively to page body when resizing the window (even by 1 pixel !)
no horizontal scroll bar should appear for background block
background block position isn't fixed
Constraints
no JS
CSS2 preferred
What I tried
Page body CSS:
#pageBody {
width: 820px;
margin: 0 auto;
}
Background block CSS:
1. A full-page div which displays a CSS centered background
<div id="backgroundBlock"></div>
<div id="pageBody">
</div>
#backgroundBlock {
background: no-repeat center 0 url(bg.png);
width: 100%;
height: 100%;
position: absolute;
}
But when the window's size is odd:
the CSS background is shifted by 1 pixel on the left
background image appears blurry on Internet Explorer
2. A repositioned child div
make background block a child of page body (which is centered)
make background block positioned absolute (to put it behind page body)
use negative margins to reposition the background block
make background block overflow: hidden to prevent the scroll bar from appear for that div
<div id="pageBody">
<div id="backgroundBlock"></div>
</div>
#backgroundBlock {
background: no-repeat url(bg.png);
width: 2560px;
height: 780px;
position: absolute;
margin: 0 0 0 -870px;
overflow: hidden;
}
But problem: the scroll bar appears for the background block...
Here are a few ideas I could think of, with their issues. However, I could not reproduce the "blurry in IE" issue, so I don't know which solution have it or not.
I did put "Extra markup" as an issue for solutions including a div (#backgroundBlock) only used to display the background image, as it is not semantic.
Solution 1 (jsfiddle)
Description : Your first solution
Issues :
Extra markup
On Chrome, depending on the page size, pixels can be aligned differently. You can see it on jsfiddle near the right border :
Solution 2 (jsfiddle)
Description : Multiple-backgrounds on body. #backgroundBlock div not needed.
body {
background: no-repeat center top url(bg.png), url(bodybg.png);
}
Issues :
Not compatible with old browsers (IE8, FF3.5, ... ; source)
On Chrome, same alignment problem as in solution 1
Solution 3 (jsfiddle)
Description : Use of translate. No more pixel alignment errors.
#backgroundBlock
{
background: url(bg.png);
width: 2560px;
height: 780px;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
Issues :
Extra markup
You have to use overflow-x: hidden on body to avoid horizontal scrollbar
Not compatible with old browsers (IE8, FF3, ... ; source). You should also use prefixes for compatibility (-webkit-, -moz-, ...). I did not add them to keep the example simple
Solution 4 (jsfiddle)
Description : Use of translate and ::before. Alternative version of solution 3. Pseudo-elements compatibility are not an issue here since every browser supporting 2D-tranforms supports ::before (source).
#backgroundBlock
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#backgroundBlock:before
{
content: '';
background: url(bg.png);
width: 2560px;
height: 780px;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, 0);
}
Issues :
Extra markup
Not compatible with old browsers (IE8, FF3, ... ; source). You should also use prefixes for compatibility (-webkit-, -moz-, ...). I did not add them to keep the example simple
There are other possibilities but I think most of them would have one of the above issues.
For example, you could set the #pageBody width to 2560px, set the background on it, add padding to have a content size of 820px and translate it in order to have it centered on the page (and prevent horizontal scrollbars using overflow-x on body). This would be possible because the background image and page body both have fixed width.
I have a page that displays a map with some pins placed on places of interest. Markup and style as follows:
HTML:
<div class="map">
<div class="pins">
Pin #1
...
Pin #12
</div>
CSS:
.map {
width: 100%;
height: 100%;
position: relative;
background: transparent url([image]) no-repeat 50% 50%;
background-size: cover;
}
.pins {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
{
.pins > a {
width: 20px;
height: 31px;
position: absolute;
}
My question is: how can I keep my pins, which are absolutely positioned to specific locations on the map, aligned correctly with the map? I've tried using percentage values for the pin positions but because the map is always centered, the alignments go off as soon as the map starts getting cropped at the sides.
I realise I can implement a JS fix, but I'm wondering if there's a pure HTML/CSS solution to this.
Thanks.
I like your question!
So what background-size cover does is keeping the perspective of the image.
This way you don't know how the displayed dimensions of the image are.
Execpt you knew the ratio in the first place.
I did some experimenting, with the fluid-video-padding-bottom "hack".
So imagine a 16/9 map.
All you need is a container that lays exact on top of the image (or it could be the very same container as in my example) and behaves the same as background-size cover. Achieved using padding-bottom trick.
The only thing left to do is resize the pins accordingly. (I used viewport based units)
My example.
padding-bottom: 56.25%; /* 16:9 */
Instead of using the padding bottom trick, you could use object-fit positioning. Which is not well supported yet.
I have a video background on my website, which want to have a blur overlay over it. Something like IOS7 Notification Center. Since I could not do it by Photoshop. I thought to use blur effect in CSS. It seems also doesn not do what I want.
However, I made a div class width 100% height and width. and choose white color as background, then gave it the blur element. It does not work the way I want, anyway.
#blur{
width: 100%;
height: 100%;
z-index: -1;
position: fixed;
background: #FFF;
top: 0;
filter:blur(350px);
-o-filter:blur(350px);
-ms-filter:blur(350px);
-moz-filter:blur(350px);
-webkit-filter:blur(350px);
}
HTML : <div id="blur"> </div>
This is an example like what I am looking for: http://wpuploads.appadvice.com/wp-content/uploads/2013/06/117.jpg
Any idea?
A CSS blur filter will blur what's part of the layer, not what's behind or in front of the layer. So you may need to apply this type of filter directly to the video container.
I'm not 100% sure this is your issue since no HTML was added to the question.
UPDATE:
I just tested this on YouTube.com and if I apply a blur filter directly to the <video /> element, the video plays blurred.
Don't think i understand the question correctly. But if you want a white layer on top of the video you need to add the opacity property in your css code, to give the effect of a transparent overlay.
opacity: 0.4;
Your code should then look like
#blur{
width: 100%;
height: 100%;
z-index: -1;
position: fixed;
background: #FFF;
top: 0;
filter:blur(350px);
-o-filter:blur(350px);
-ms-filter:blur(350px);
-moz-filter:blur(350px);
-webkit-filter:blur(350px);
opacity: 0.4;
}