Full screen images regardless of aspect ratio - html

Is there a way or a plugin to make an image fill the screen like with Fancybox. Like one that automatically crop, centers, and scales the image?


body {
background: url(images/sample.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Related

How to add an image to my css body background?

This is where my image is located.
I already tried several options shown on the picture, I have my css on my html (training purposes ) C:\Users\developer\Desktop\HTML Folder2

the following is taken form https://css-tricks.com
We can do this purely through CSS thanks to the background-size property now in CSS3. We'll use the html element (better than body as it's always at least the height of the browser window). We set a fixed and centered background on it, then adjust it's size using background-size set to the cover keyword.
html {
background: url(http://enjoycss.com/webshots/hB_1.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
https://css-tricks.com/perfect-full-page-background-image/

body {
background: url(HTML Folder2/image.jpg)no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}

Bootstrap - is it possible to resize an image based on the column size?

I am creating a picture gallery using Bootstrap. At full screen, it looks good
At minimum size, it looks good
But while re-sizing, it does this
I would like the first image (the trees) to be as wide as the second image (the lake), and I've tried adjusting width/max-width, but the problem is the image doesn't scale back down when the second image is ready to be in-line with the first image.
Is it possible to have an image be a certain width when it's col-sm-#, and a different width when it sets to col-md-#?

Consider setting both as background image covers on the divs. This will allow you to resize the divs while retaining the proper aspect ratios of the images.
.yourdiv1{
background: url(images/yourimage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.yourdiv2{
background: url(images/yourotherimage.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

How to position a cover image in the background?

I've placed an image in the background of my div with this code:
background: url(../images/cover-image.jpg) no-repeat 50% 100% fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 30rem;
But my problem now is, that I want to move the visible part of the image in the div. The Bottom of the picture should be at the bottom of the div, but I can change everything in the background: (center bottom, 50% 100% etc.) statement, nothing happens.
Can anybody give me a hint?

Try using
background-position: center bottom;

You need to remove the other styling in you 'background' deceleration and just put:
background-position:bottom;
see the fiddle here: https://jsfiddle.net/xerf3z5j/

As one line, this would be:
background: transparent url(../images/cover-image.jpg) center bottom / cover no-repeat fixed;

background-size: cover means that the background image will always take the full width and height of your div.
Should work if you remove those parts:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

How to make responsive background image?

everyone.I want to make a full width background image as responsive.I am using bootstrap3.00 framework.as usually when some one use bootstrap framework it make a template as responsive but the background which i used that is situated outside of the bootstrap container.and when i look it for a small device the background image shows scroll bar.Now how can i fixed the problem??please the experts give me a suitable solution.

Perfect Background image (from css-trick.com)
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Example :
html {
background: url(http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Fixed a background image with 100% scale to screen

Do anyone has similar experience and has the solution?
I use below CSS to display an background image on a mobile, of course I do declare
I could not able to display the image according to screen's height and width, if I remove the "background-attachment: fixed", then image is resized according to the screen's height and width but image is center according to the length of web content instead of the screen.
Do anyone have better solution?
#home {
background: url('../images/hkfmpt_trans.png');
background-repeat:no-repeat;
background-position:center;
background-attachment: fixed;
background-size: contain;
}

try this
html {
background: url('../images/hkfmpt_trans.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}