How to show full height background image?
You can do it with the code you have, you just need to ensure that html
and body
are set to 100% height.
Demo: http://jsfiddle.net/kevinPHPkevin/a7eGN/
html, body {
height:100%;
}
body {
background-color: white;
background-image: url('http://www.canvaz.com/portrait/charcoal-1.jpg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
CSS: stretching background image to 100% width and height of screen?
You need to set the height of html
to 100%
body {
background-image:url("../images/myImage.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
html {
height: 100%
}
http://jsfiddle.net/8XUjP/
Full-screen responsive background image
http://css-tricks.com/perfect-full-page-background-image/
//HTML
<img src="images/bg.jpg" id="bg" alt="Sample Image">
//CSS
#bg {
position: fixed;
top: 0;
left: 0;
/* Preserve aspet ratio */
min-width: 100%;
min-height: 100%;
}
OR
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
OR
//HTML
<img src="images/bg.jpg" id="bg" alt="Sample Image">
//CSS
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
//jQuery
$(window).load(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(resizeBg).trigger("resize");
});
Background image full width and height
Try the following solution:
body, html {
margin:0;
padding:0;
}
.banner_div {
background-image: url(http://placehold.it/100x100);
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-size:cover;
background-position: center;
}
<div class="banner_div">
<p class="banner_text">Line 1</br>Line 2</p>
</div>
CSS: Full Size background image
Your screen is obviously a different shape to your image. This is not uncommon, and you should always cater to this case even if your screen is the same shape (aspect ratio), because other people's screens will not always be. To deal with this, you have only one of three options:
- You can choose to completely cover the screen with your image, but not distort the image. In this case, you will need to cope with the fact that edges of your image will be cut off. For this case, use:
background-size: cover
- You can choose to make sure the entire image is visible, and not distorted. In this case, you'll need to cop with the fact that some of the background will not be covered by your image. The best way to deal with this is to give the page a solid background, and design your image to fade into the solid (although this is not always possible). For this case, use:
background-size: contain
- You can choose to cover the entire screen with your background, and distort it to fit. For this case, use:
background-size: 100% 100%
how to insert a full screen large background image in html,css?
You cannot have both:
- The image show fully
- Have the image cover the entire background
Remember that the image is of a fixed ratio and most screens will have a different ratio than your image not to mention differences in the actual viewable area (viewport) because of the browser toolbars and OS toolbars.
Your options are:
- Have the image always be full-width using
width:100%
. This risks having a part of the image cut off at that bottom if it is taller than the viewport or having some white-space at the bottom if the image is shorter than the viewport. - Have the image always be full-height using
height: 100%
. This risks having a part of the image cut off at the right side if it wider than the viewport or some whitespace if it is not as wide as the viewport. - Use
backgorund-repeat
to have the image repeated vertically or horizontally to cover any whitespace.
Most other options you can find in CSS do a combination of the above options, with some additions like centering the image where there is white-space.
Most designers select the images with this in mind, choosing images that don't have any important details near the edges, and thus still look good if a small section is cut off at any end.
Related Topics
Can Flexbox Divide Items Evenly on Multiple Rows
Sass Mixin for Animation Keyframe Which Includes Multiple Stages and Transform Property
Css3 Transform Reverts Position: Fixed
Yui Reset CSS Makes <Strong><Em>This Not Work</Em></Strong>
How to Pass !Important as Parameter/Option for Lesscss Mixins
Bootstrap 3: Can the Glyphicons Be Stacked Like Font Awesome's Icons
Rotating a Background Image with CSS3
CSS Transitions with :Before and :After Pseudo Elements
Adding Border-Radius for Embedded Youtube Video
Add Timestamps to Compiled SASS/Scss
Clipping or Chamfering Corners of Image to See Background
Clicking a Child Doesn't Trigger the Parent's :Active State in Ie