Develop Reference

Slowly removing blur on background image after page loads

So, using html, css, javascript, I am looking for a way to have it so that my page will load with the background image blurred. Then, after the whole page loads, the image slowly goes from being fully blurred to being not blurred at all. Not an instant blur to crisp, but I nice transformation.
Not sure if I would have to have a blurred picture and one thats not and just somehow switch the pictures slowly? Any tips would help.

Blurring sounds like a nice job for Canvas.
Maybe have a look at http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
You can put your canvas page-wide on your screen with something like:
canvas{
position: absolute;
top: 0px;
z-index: 0px;
}
Then draw your background-picture blurry (have a look at the hyperlink) on it, and use setInterval or something like that in order to unblur it gradually.

I managed to be able to blur the background-image using a CSS hack. Usually, I would just set the opacity property of a container, but that would effect everything in the container. What I did instead was use the :before pseudoclass to toggle only the background-image.
#myContainer {
height: 400px;
width: 400px;
position: relative;
overflow: hidden;
}
#myContainer:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.1;
background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRCFyJhwDi5ud74pENDaCIuggegz89q6Odhke5IEo7vEKwjewDxsQ);
}
h1 {
color: blue;
}
http://jsfiddle.net/59zutyLd/1/
https://css-tricks.com/snippets/css/transparent-background-images/
To remove the blur, you could use the jQuery animate property for something like this
$("#myContainer:before").animate({opacity: "1.0"}, 2000)
Unfortunately, pseudoclasses are not part of the DOM, so they can't be used in jQuery.

Keep the background_div with position:relative
Create a overlay div inside that and keep it as position:absolute, opacity:0.5, full width, full height.
Apply fadeout effect on overlay div
I hope it will the expected output.
Try the demo here:
[1] https://jsfiddle.net/fnwL8ozg/3/

Correct me if I'm wrong but what you are looking for is "Blur Up" technique described here: https://css-tricks.com/the-blur-up-technique-for-loading-background-images/
TLDR:
You create very small size copy of original picture
You load that first and add Gaussian blur overlay so it doesn't seem bad
On download complete with basic JavaScript you change pic with original
Add transition to blur none and profit

How can I prevent the stutter that occurs while transitioning background-image?

I am using background-size: cover; transition: background-image 4s; on an element and I have written some JS that changes the background-image property every 10 seconds.
The element transitions the background image in webkit browsers but the image shakes while transitioning.
How can I prevent that?
Here is a JSFiddle with an example of the behavior:
http://jsfiddle.net/michaelynch/x60gL1p6/

Instead of using background-size: cover;, use in % like background-size: 100% 190%;

pattern and image both using css

I have a situation where I have fill the body with a background image which is nothing but a pattern - so I would use
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
but now I also need one more image to set on top of this which will appear the horizontal and vertical center of screen, (this image ofcourse smaller and would only occupy the center).
Its like putting 2 images in BG smaller one over the another. How could I do that?
And I have to do that in javascript/jQuery.

How about using pseudo elements.
CSS desk demo
body
{
background:url(http://placehold.it/200x100) repeat;
}
body:after
{
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background: url(http://lorempixel.com/400/200) center center no-repeat;
}

Using css3 you can achieve something like this (two images), since your question is tagged with HTML5, so I think you can use this probably
body {
background: url('paper.gif'), url('another.gif');
background-repeat: repeat-y, no-repeat;
}
This is an example but not sure how you want to place both images.

Either apply a z-index:{NUMBER}; that is greater than the body's z-index (default 1) if you don't mind the top of your background image being cut off (or you can just edit the image to have an empty bar at the top to account for your header).
Or, apply your background not to body, but to whatever your main content div underneath your header is.

Position and Slider (see image)

Hi Stackoverflow,
I have some questions.
1) The image behind the black circle will be a full-width responsive slider. How can I put this image behind all the elements, in a way that Internet Explorer doesn't bug everything?
I know I can use position: absolute with z-index, but since I always had problems with IE and positions, I don't know (really), a better solution.
2) The background image of the black circle is also from the slider. Each BG it's directly linked with a image. Example: this colourful image will be linked to this black circle bg. Next slider will be another image with another bg.
How can I do this? :/

Try this:
As you said, set the position and z-index to the black image and append the same to body of the html page. Then change the slider images as earlier.
I hope it will work.

put the background image as a DIV and the next DIV "contents" will have all the contents
eg:
----contents ----
</div>
CSS
#bg-image {
background: url('http://t2.gstatic.com/images?q=tbn:ANd9GcSsYV2xklhQlwOFsqPY8OrL69n2F_naug6eShy67xcKm6QRFWmqXw');
background-size: cover;
width: 100%;
height: 100%;
position: fixed;
overflow: hidden;
}
#contents {
background: none;
width: 100%;
height: 100%;
position: absolute;
}

-- Take a look here Background image swap full
-- Other option is, Make a large size image and place it on background.
-- This is with css. Check this link perfect full page background image

Since the black circle doesn't change, what I did was: putting the black circle and the background image in a same image. And I just had to "control" the position of the text. It was a dumb solution, but it solved.

CSS to display image preview better

I was trying to figure out what is the best, if it can be done, and desired method to take an image that is uploaded and trim the image for a thumb in CSS. If it cannot be done in pure CSS what is the method to do it in JavaScript/jQuery? The images may be different sizes but I am looking for a way that an image will square on center, and then reduce to fit. Example below:
This image is 413 x 300.
If this image was trimmed from the left and right for the portfolio thumb it would be 300 X 300:
Then the image needs to be reduced for the thumb 200 x 200 or what ever value the thumb is set to display:
EDIT
my understanding if #img_preview{width:200px;} is applied it would result in this:

example here:
http://jsfiddle.net/cnWqQ/5/
css like this:
#img-wrap{
height:200px;
width: 200px;
background-image: url('http://i.stack.imgur.com/yQ1j8.jpg');
background-size: cover;
background-position:center;
}
html like so:
<div id="img-wrap"></div>
Works by putting the images as the background in a div, works for all image shapes and sizes consistently.
it involves some css3.

You can do it in CSS, but it will only work with modern browsers :
You'll use background-image property :
<div id="myImageTrimed">
</div>
and the css :
#myImageTrimed {
background-image: url('img/youImage.jpg');
background-position: center; /* to make sure it trims the borders */
background-size: cover; /* As large as possible */
height: 200px; /* But only 200x200px are shown */
width: 200px;
}
Please comment if you have more browser constraints.

Just set the CSS width to the value you need, the height will be automatically adjusted to maintain the aspect ratio.
#img_preview{
width:200px;
}

You can mask the image with a div:
Your div:
height:200px;
width:200px;
overflow: hidden;
Your image:
position:absolute;
height:inherit;
margin-left:-15%;
see this demo below: http://jsfiddle.net/jRCgP/