I am trying to place a background image in the background of the body tag using right bottom but for some reason the image almost totally appears out of view. Besides a solution I would like to also understand why this is not working as I expected. I changed the combination to other settings like left bottom and still image is out of view.
The image is this one: https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1
body {
background-image: url(https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1);
background-repeat: no-repeat;
background-position: right bottom;
}
<body>
</body>
The body doesn't have enough height yet to get the image rendered as expected, so you can to this in a couple ways:
set html, body { height:100%}
html,
body {
height: 100%
}
body {
background: url(https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1) no-repeat right bottom;
}
set body { height:100vh}
body {
background: url(https://i.stack.imgur.com/fpKuw.jpg?s=328&g=1) no-repeat right bottom;
height: 100vh
}
This is because there is nothing in the body, there is just not enough space for the image to appear.
Example:
https://jsfiddle.net/hhs8jvgr/
Related
This seems to be a common question but the existing answers I see do not seem to work for me. I have a background image that is much taller than it is wide. I would like the height to be 100% of the height of body. So far I have tried:
body, html {
height: 100%;
min-height: 100%;
}
body {
background:url("NewLogo.png") no-repeat center center;
background-size: 100% auto;
}
I have also tried changing background-size: cover; but this also just makes the image large but cuts off the top and bottom.
Use contain. This will guarantee that the entire image appears in the container, and nothing is cut off:
body {
background:url("NewLogo.png") no-repeat center center;
background-size: contain;
}
Please note that if you want to have a background image which is cover and has got it's own height (without just being large, as wide as your browser but loosing the top & bottom as you said), you can try giving an appropriate height in vh to your background image.
body {
margin: 0;
}
#image {
background-image: url(https://images.unsplash.com/photo-1504387103978-e4ee71416c38?auto=format&fit=crop&w=2134&q=60&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D);
background-repeat: no-repeat;
height: 293vh;
background-size: cover;
}
<div id="image">
</div>
Otherwise if you just want to make your background image cover, or if you want make it contain(though your image wouldn't fit the browser wide, it would be in it's real height), you can visit the following link:
codepen>background-size>CSS-Tricks
I need to have background extending to the bottom of the page, and it should work with both short and long pages.
<html>
<body>
<div id="container">Container of variable height</div>
</body>
</html>
css
body {
background: url("background.jpg");
}
#container {
margin: auto;
width: 800px;
}
That's the general structure. Background works fine on long pages with a scroll, but on short pages it cuts off right below #container.
If I add
html, body {
height: 100%;
}
It will extent do the bottom on short pages, but if you scroll on long pages, background cuts out in the middle.
I tried using
html, body {
min-height: 100%;
}
But it's just ignored by all browsers
What can I do make background work both on long and short pages? Thanks!
You can play around with the various background-size css properties. e.g. assuming your background image's size is quite large and does not need tiling:
body {
background: url("background.jpg");
background-size: cover;
}
USe:
body {
background-image:url('background.jpg');
background-repeat:repeat-y;
}
I have a page with 2 background images, one of them needs to show at the very bottom of the page. Currently I've implemented it like this:
body {
background-image: url('/cheri/image/background.png'),
url('/cheri/image/backgroundB.png');
background-position: top, bottom;
background-repeat: repeat-x, repeat-x;
}
This works fine when page content is higher than the browser window, but if it's smaller an empty white space is left below the background image, like in this picture:
http://img198.imageshack.us/img198/4560/screenshot20120916at851.png
I have tried to set the body as position:absolute, height:100%, but it did not render correctly when scrolling was present. I have also attempted to create a separate div for the background image and absolutely position it to the bottom, but since I have different position properties for some elements that occur at the bottom, the z-indexing didn't work properly.
Thanks for any help!
Use min-height: 100% on both html and body:
html, body { min-height: 100%; }
DEMO
It creates no issues when you have enough content to cause scrolling.
DEMO
Set the HTML element as well:
html {
background-image: url('/cheri/image/background.png'), url('/cheri/image/backgroundB.png');
background-position: top, bottom;
background-repeat: repeat-x, repeat-x;
}
I have an HTML page, and this css:
body {
color:#000;
/*BG Image is specified by javascript*/
background-repeat:no-repeat;
background-position:top left;
}
What you have to know, is that the page is not big enough in height, so if loaded correctly, there's a small gap between the bottom of the screen and the last line of text displayed.
I would like to make it so that the background sticks to the bottom right part of the screen, but when I change top left to bottom right, it just seems to stick to the bottom of the webpage (aka where the text ends), rather than to the bottom of the screen. I'm not sure if there is a solution, but if there is, please let me know
you need a background-size: cover property in the body tag
this will make the background cover the whole body element
try this
body {
background-position: bottom right;
background-attachment: fixed;
background-repeat:no-repeat;
background-size: cover;
}
Try setting height:100%; in the body selector:
body {
color:#000;
/*BG Image is specified by javascript*/
background-repeat:no-repeat;
background-position:top left;
height:100%;
}
I have a tiling background image, but I want to overlay another tiling image over it. I have tried using:
html {background: transparent url('../images/bgtile.jpg') repeat top center;}
body {background: transparent url('../images/body.png') repeat-y top center;}
But it doesn't work quite right. The body tag behaves like a div because it doesn't stretch to fit the screen.
I am sure that I am just missing something obvious.
Try this (It works in FF3 and IE7 and I assume Safari and Chrome):
html {
background: transparent url('../images/bgtile.jpg') repeat top center;
height: 100%;
}
body {
background: transparent url('../images/body.png') repeat-y top center;
height: 100%;
overflow-y: scroll;
}
html > body {
min-height: 100%;
height: auto;
}
Why not work with a 100% width / height within the ? That should work with every browser.