Let's say my site is arranged like this in terms of layers.
Background Image ( background-size:cover;)
500 x 500 div with a semi-transparent white background.
Content within the div.
What I'd like is that the area under the div (on the background image) to be be blurred. My problem is that with varying screen sizes, I can't have the background image "pre-blurred" because that div will not always be aligned with the background.
So my question is, is it possible to blur a specific portion of a background image on the fly by maybe defining the region like I would for the div? For example position:absolute; top:45% right:0; Or what's my best cross-browser options. CSS or other wise, it doesn't matter.
Thanks
On a side note I've thought about having a div inbetween the background and the previously talked about div with a background image the same as the one behind it but set it's background position to match the foreground div and just blur it. Kinda like zooming into a photo in programs like ps and the box in the navigator refers to only that part of the image being showed.
This may be a little heavy for what you're trying to do, but you could use Blur.js
$('.target').blurjs({
source: 'body',
radius: 10,
});
Should you need to blur more than just the background, checkout:
https://stackoverflow.com/a/17134789/1947286
You can overlay one picture with another (using divs) and blur the overlay.
<div style="position: relative; background: URL(...)">
<div style="position: absolute; background: URL(...);
top: ...; left: ...; width: ...; height: ...; filter: blur(3px)">
Update: Here it is in perfection: http://css-tricks.com/blurry-background-effect/
Related
I have a transparent element like that is positioned absolutely
header { position: absolute; top: 0px; width: 100%; }
... and it's on top of a colored div.
How do I get the color of the div below of a absolutely positioned transparent div with javascript?
This is the transparent div (the navbar):
This is the navbar when you scroll down a little bit:
Feel free to ask any questions.
This sounds like you have to actually capture a "screenshot" and look at how the page is finally rendered. As far as I know, that is the only way.
Basically you would need to check the rendered color of a single pixel. Not knowing why you want to do this is critical in is this necessary or not.
One way to achieve this is to use something like https://html2canvas.hertzen.com to take a screenshot of the rendered page, put that into a <canvas> element and then once you have that, check the color of a pixel you know to be inside the header; check https://jsfiddle.net/ourcodeworld/8swevoxo/ for an example.
I am using a div that slides out when you click on it.
Here are some images of what I am trying to achieve:
This is the Div, collapsed by default
This is the Div after it is slid out (highlighted)
This is what happens after screen size is changed. The clickable div is present behind content Which I wish to avoid.
My Div's CSS:
.sliderDiv {
z-index: -10;
position: relative;
left: 200px;
width: 240px;
}
I use this command to slide it out on click:
slideItOut:function(){
var divsize=$(".sliderDiv").offset().left-150;
if(divsize>100){
$(".sliderDiv").animate({
"left":"-=194px"
},"slow");
}
else{
$(".sliderDiv").animate({
"left":"+=194px"
},"slow");
}
}
The problem is when you resize, it is not responsive at all and the div actually hides behind other content. Maybe this method is not supposed to be responsive.
Is there a way to make the same "slider" responsive or atleast hold its position while the screen size is changed?
I want to know of any way in which I could resize my window or screen and the div remains in same area as the 1st two images.
Also, this is being implemented in a modal. So its not exactly in a fixed area of the screen.
It won't solve without your full source code, I think. You should give its source code or put somewhere. Then, I try to fix. Or, I can offer optimum way
I have a strange issue with IE (tested on IE8 as this is the lower end browser on the project)
I make a fill height & full width div appear on the screen on some condition to block all user action (it's just a help, I know it can easily been broken user-side..)
The only action that can be done is clicking on this curtain at a certain x/y range to disable it.
But, obviously, in Internet explorer it doesn't work.. elements behind the div are still catching click and hover actions... Why?
My first idea was that there was something wrong with the css making this div a 0x0px div on IE, but when I add a background-color to the div, it fills the screen as expected, so that's not the solution.
this is the curtain's css :
#screencurtain {position:absolute; top:0px; left:0px; display:block; width: 100%; height: 100%; z-index:9000;}
This is a known issue in IE with positioned elements.
The most common solution is to set the element's background property.
If you need the background to remain transparent, you can simply use a transparent image as a background tile. Alternatively, you can set the element's background to an image that does not exist.
For example:
#screencurtain {background:url('transparent.gif') repeat;} /* 10x10 gif image */
/* OR */
#screencurtain {background:url('some-made-up-image.gif');} /* bogous path */
I want to use a div as a background for a website.
If I use position:fixed and set the width & size to the viewport size the design breaks on mobile devices/tablets as they do not support the fixed position.
What's the best way to set a div as a static background, so that it works on mobile devices too?
I'm not entirely sure how you intend to use the background, but I created a loose way to do this here. The tacky background is applied to a div the size of the screen, and it will not move (as long as you're careful with what you put inside it). However, the same effect could be done just by direct styles on the body - I'm not sure what exactly you need the div for, so I can't guarantee this technique will work for your use case.
How it Works
With disclaimers out of the way, here are a few details on how it works. All content will have to appear within two divs: one outer one that has the background, and an inner one to hold all of the content. The outer one is set to the size of the page and can have the background applied to it. The inner one then is set to the size of the parent, and all overflow is set to scroll. Since the outer one has no scrollbar, any interior content that exceeds the size of the background tag will cause a scrollbar to appear as though it were on the whole page, not just on a section of it. In effect, this then recreates what the body is on the average web page within the "content" div.
If you have any specific question on the styles, let me know and I'll flesh out the mechanics in more detail.
With jQuery
I suppose there's still one remaining option: use similar style rules, but absent the ability to nest everything within the background, instead prepend it, and change it's position whenever the user scrolls, like so.
Then, just inject this code:
<style>
#bg {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
background-image: url(http://cdn6.staztic.com/cdn/logos/comsanzenpattern-2.png:w48h48);
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>
<script>
$("body").prepend("<div id='bg'></div>");
$(document).on("scroll", function () {
$("#bg").css("top", $(document).scrollTop())
.css("left", $(document).scrollLeft());
});
</script>
modifying the style rules for the background div accordingly, and you should be good. It will not have a good framerate since this will always appear after the scroll paint, but you're running low on options if you have so little control over the rest of the document structure and style.
You don't have to use jquery. I was able to get this effect with just CSS.
You set the div just below the initial tag. Then apply the image to the html within the div. Give the div and id attribute as well (#background_wrap in this case).
...I tried this without applying the actual image link within the html and it never worked properly because you still have to use "background-image:" attribute when applying the image to the background within css. The trick to getting this to work on the mobile device is not using any background image settings. These values were specific for my project but it worked perfectly for my fixed background image to remain centered and responsive for mobile as well as larger computer viewports. Might have to tweak the values a bit for your specific project, but its worth a try! I hope this helps.
<body>
<div id="background_wrap"><img src="~/images/yourimage.png"/></div>
</body>
Then apply these settings in the CSS.
#background_wrap {
margin-left: auto;
margin-right: auto;
}
#background_wrap img {
z-index: -1;
position: fixed;
padding-top: 4.7em;
padding-left: 10%;
width: 90%;
}
I'm using jquery mobile, and I have a image that I would like to fit the screen from right to left, with no gaps. However, if I just put the image without doing anything to it like <img src="image.png />", it turns out with a small black border around it. This stays despite me setting width=100% in the css. How can I remove this border?
Adding some code:
<div data-role="content" style="background-color: #000000">
<div id="slogandiv">
<img src="slogan.jpg" id="slogan" width="100%" height="45%"/>
</div>
I just did this. It is because that the data-role = "content" has a automated padding of 15px.
I went into the .css file and removed this. search for ui-content. remember in the ui-content, listview, that it has -15 so change this to 0 aswell.
A CSS directive of width: 100% for your image simply means that the browser should display the image at its actual size (if it can), it won't stretch it to some other size. This may explain why you have a slight border around it, as the image doesn't quite scale to the full width of the viewport. You could try tinkering with the img tag's margin and padding settings, but I suspect the approach that will work best for you is to display the image a different way.
Have you tried manipulating the CSS of the containing element? Say you have a paragraph class called .container. You could do something like this:
.container {
background: url('image.png') no-repeat;
background-size: contain;
width: 480px;
height: 240px
}
… this will use your image as before, but this time the background-size attribute of contain will force it to fill the dimensions of the parent element (the height and width of which we have defined above).
background-size is new in CSS3 and therefore not uniformly-supported, but it's in WebKit and several other browsers. Read more: A List Apart: Supersize that Background, Please!