how to blur the background image only in css
Tags: html,css
Problem :
Hi i am trying to blur the background image but i think its lacking in doing so. Any help over it will boost my energy for it. Thanks
This my CSS
html {
position: relative;
min-height: 100%;
max-width: 100%;
background: url(img/rsz_1spring.jpg);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
max-width: 100%;
overflow-x: hidden;
}
I am trying to apply this but it blur all my webpage instaed of background image only.
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
Thank you.
Solution :
If you are applying blur to <html> then it will blur your webpage.
Instead of adding background to <html> You need to create another <div> with in <body> with size to that of webpage and add blur to it.
Example
body{ font-family:"Arial"; color:#fff;}
.page-bg{
background:url('http://www.planwallpaper.com/static/images/general-night-golden-gate-bridge-hd-wallpapers-golden-gate-bridge-wallpaper.jpg');
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
z-index:-1;
}<h1>
This is a title
</h1>
<div class="page-bg">
</div>CSS Howto..
Yes it can be done. Check out this example JSFiddle. Basically I changed your HTML to this: <div id="navbar"> <div class='navbar-inner'> <div class='container'> <ul class="nav nav-list"> <div> <li><a href =...
I believe this is due to padding. Without a jsfiddle or anything I can't really tell though. Try this: #mainvideo{ width: 960px; height: 500px; float:left; margin-top:10px; background-color:#75A96F; padding: 0; }...
Your problem can be solved by using the .parents(selector).last() code: For example: $("img[data-author="921"]").parents(".joms-stream.joms-embedly--left.joms-js--stream") .last().hide(); This code works because jQuery returns a list of parents from .parent(selector) from in most to...
You could use jQuery UI switchClass(): Summary Adds and removes the specified class(es) to each of the set of matched elements while animating all style changes. Method Signature .switchClass(removeClassName, addClassName...
Using mozilla Firefox and Webkit based web browsers, you could use :any() pseudo-class to target a group of elements at once. The :any() pseudo-class lets you quickly construct sets of...
inherit means that the element will assume the style of its parent. You can't "clear" existing style specifications, so you'll have to override it with your desired result. Ex: .bugnote...
Remove the part |Helvetica+Neue:400,500,700. Google Web Fonts do not contain Helvetica Neue. It is a commercial font, not available for free, and probably not available as a web font for...
In your CSS rule ul.topbar li ul.dropdown li ul.dropdown you want to fix the positioning. You're already using position: absolute, that means this element will be positioned an absolute distance...
Not a particularly nice solution but it seems block_prefixes is passed to block form_row. Block_prefixes is an array of the form field types in order of inheritance so a text...
Instead of using Javascript to achieve this you could simply use the :hover attribute in CSS #menuItems li { display: inline; padding: 4px; } #menuItems li:hover { background-Color:#0099FF; color: white;...
The URI represeting the resource from the bundle can not be represented as a file. So the approach to create a file from the URI is not possible. What you...
What you probably want to do (a bit unclear question) is to cast a blurring shadow to the text that has no offset. You can do that by applying a...
Keeping in mind that I only need to render properly in Outlook 2010, I'm dropping the explicit <html> and <header> tags and allowing the MailMessage to handle those: message.Body =...
Do you mean something like that? If so, you are quite there, you just need to set the image position:absolute so the image will be as background, and also: z-index:-1...
Why not make something like this? @media screen and (max-width: 520px) { .form-wrapper-01 #submit { float: none; max-width: none; margin-top: 1em; } .form-wrapper-01 #search { max-width: none; width: 100%%; }...
#dropdown_menu { filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF280C00', endColorstr='#004A1D00'); /* for IE */ background: -webkit-gradient(linear, left top, left bottom, from(#280C00), to(rgba(75, 30, 0, 0))); /* for webkit browsers */ background: -moz-linear-gradient(top, #280C00, rgba(75, 30,...
Your answer is a combination of using the attribute selector and the not selector and the :focus selector. Here's a JsFiddle and the CSS below: http://jsfiddle.net/rgthree/bdb63/ input[type="text"]:not([readonly]):not([disabled]):focus, input[type="password"]:not([readonly]):not([disabled]):focus,...
Since you're using Bootstrap, just utilize their grid system. Looks like you've attempted it here: <div class="row"> <div class="col-md-12"> <hr /> </div> </div> But instead of leaving that empty, move...
.btn { background: #C5D200; color: #fff; width: 150px; height: 30px; padding: 10px 20px; border-radius: 20px; display: block; position: relative; overflow: hidden; text-align: center; } .content { position: absolute; transition:...
Please try the following: @media screen and (min-width: 40rem) and (max-width: 60rem) { #div1 { float: left; width: 200px; /* change this value to your own needs */ } #div2...
Add css to login button { width:auto; float:left; } and class row to div which wrapped on login button....
Actually you can. 1st Solution Instead of using the .css file extension, use .php Set up variables <?php header("Content-type: text/css; charset: UTF-8"); //look carefully to this line $brandColor = "#990000";...
You can use a table: <table> <tr> <td>You own</td> <td>20</td> </tr> <tr> <td>Price</td> <td>20</td> </tr> <tr> <td>BPS</td> <td>0.50</td> </tr> </table> or floating divs: <div...
Use the <col> tag and style it following this guide. This way you only need to add a class (or inline style specification) to the <col> element instead of each...
Each file needs it own line like so: stylesheets[all][] = css/style.css stylesheets[all][] = css/ui-lightness/jquery-ui-1.8.1.custom.css scripts[] = js/jquery-1.4.2.min.js scripts[] = js/reservations.js scripts[] = js/jquery-ui-1.8.1.custom.min.js ...
the output PDF is A4 ratio, I need a 4:3 ratio which fit page to full screen. I think wkhtmltopdf have some option, or some print control css can...
You will need to add your html tag & css & css class in language file for that. For Example: $_['text_reward_received'] = 'You have received %s <span style="font-size:15px; color:red;">Reward Points</span>!';...
When you attach a function to an event, you don't really need to track the id of the element emitting the event, you just need to use the 'this' keyword...
You could test the value of $lang in the portion of code that generates the HTML output, and add a CSS-class on the link which corresponds to that language :...
Use a parent div to set the total height (in my example it's 300px but you can set it to 100% as well). Then set the height of each child...