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;
}
Related
I am using an image of library bookshelves as a background for my webpage. It is repeatable and works well on a single viewport. On top of that I have a DIV with another background, which is bigger than viewport. Here what I have in my styles.css:
body {
background-image: url("images/library4.jpg");
overflow-y: scroll;
}
.article {
background-image: url("images/old-paper.jpg");
width: 95%;
}
However, when I scroll down, background does not show below. See what I am getting
I did try all imaginable CSS options, like height: auto, etc. but nothing works. Can someone please tell me what I am doing wrong and how to fix it?
I found the solution. The culprit was just to change the scope of the background image. I.e. instead of
body {
background-image: url("images/library4.jpg");
overflow-y: scroll;
}
I placed
html {
background-image: url("images/library4.jpg");
overflow-y: scroll;
}
I have a problem about background image positioning in HTML5. I wanted to position my picture in the center and it did not work. This is the code I used in external CSS file:
body {
background-image: url(logo.jpg);
background-repeat: no-repeat;
background-position: center center;
}
The same problem is with other two-word commands (example: "bottom left;"). Syntax is fine (checked multiple times) and still the same:
problem_image
I don't understand the problem, please help?!
Short answer: background-attachment: fixed
Details:
The background-attachment property in CSS specifies how to move the background relative to the viewport.
There are three values: scroll, fixed, and local. The best way to explain this is via demo (try scrolling the individual backgrounds):
#import "compass/css3";
h2 {
text-align: center;
margin-top: 48px;
}
div {
height: 200px;
width: 50%;
max-width: 600px;
margin: 32px auto;
overflow-x: hidden;
overflow-y: scroll;
}
.scroll {
background: url('http://lorempixel.com/600/200/animals');
background-attachment: scroll;
}
.fixed {
background: url('http://lorempixel.com/600/200/animals');
background-attachment: fixed;
}
.local {
background: url('http://lorempixel.com/600/200/animals');
background-attachment: local;
}
.expand {
height: 400px;
width: 100%;
}
.extra-space {
margin-bottom: 50px;
}
<h2><code>scroll (default)</code></h2>
<div class="scroll"><div class="expand"></div></div>
<h2><code>fixed</code></h2>
<div class="fixed"><div class="expand"></div></div>
<h2><code>local</code></h2>
<div class="local"><div class="expand"></div></div>
<br class="extra-space">
There are two different views to think about when talking about background-attachment: the main view (browser window), and the local view (you can see this in the demo above).
scroll is the default value. It scrolls with the main view, but stays fixed inside the local view.
fixed stays fixed no matter what. It's kind of like a physical window: moving around the window changes your perspective, but it doesn't change where things are outside of the window.
local was invented because the default scroll value acts like a fixed background. It scrolls both with the main view and the local view. There are some pretty cool things you can do with it.
SOURCE
if you add a height of 100vh to your body the background gets centered, check below snippet:
100vh - is the height of the viewport (the visible area of a web page)
body {
background-image: url(https://via.placeholder.com/150/0000FF/808080);
background-repeat: no-repeat;
background-position: center center;
height: 100vh;
margin: 0;
}
<html>
<body>
</body>
</html>
The html and body elements are block level elements just like a div. Without a height explicitly set they simply will assume the height of their content, or with no content their height will be 0.
So you need to set the height of the body element to the same size as your viewport height to achieve your goal. The best way to do this would be to use viewport relative units:
body {
height: 100vh;
background-image: url(logo.jpg) no-repeat center;
}
Alternate method:
Another way to do it would be to first set the html and body height to 100%
html,
body {
height: 100%;
}
body {
background-image: url(logo.jpg) no-repeat center;
}
You must set it on both as the body height is relative to the html height when using percentage units.
you can use transform property to set image in center.You just need to call your image class in css and write this code.
.imgclass{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
This will set your image in the center of body. and if you are using bootstrap then just write align-self-center in your HTML image class.
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/
I am trying to create an full width image above my nav bar, but I cant even get the image to show on screen. Here is my simple HTML:
<html>
<body>
<div class="wrapper" />
</body>
</html>
And the css:
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 100%;
}
I see the jpg made it to my browser and can click on it in my resources, so there is no problem with the path. The screen is still blank and showing nothing. Any help would be awesome.
This is because height:100% is functionally useless, and your div resultingly has no height.
If you give the div a fixed height, the image should appear as expected.
Alternatively if you want the background image to apply to the background of the page, you can apply it to the <html> element and avoid the whole wrapper, 100% debacle.
html {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
}
http://jsfiddle.net/dolours/JcxLm/2/ Give a specific height, Height 100% is meaningless
.wrapper {
background-image: url(../assets/bridge.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 50px;
}
try this <div class="wrapper"></div>
It is possible that the image isn't showing because there is no content within the div and therefore it's size is 0. Try setting the width and height to a set size, something like 200px to test out this theory. Also I would change your code to:
<div class="wrapper"> </div>
you can use css for body tag, the css of body will be like this:
body{
background: url(../assets/bridge.jpg) center top no-repeat;
}
i think it will work for you, if you want just background image.
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.