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;
}
Related
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 while ago while making a site, I didn't set a height for a div section and filled it with content. Then I set the background-image to an image, and the image/div stretches to wrap the content since there is no height. I have been trying to replicate it but every time I do the same thing, the background image disappears but the content is still there (white text, can't see unless selected). This happens when I set it like:
#main{
background-image: url("images/pizza-dark.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
clear: both;
}
I know there is a way to do this but I'm not quite sure. This is crucial to the site because I am using bootstrap columns and a set height won't give a good result on mobile. In the JSFiddle below, there is no set height and, as you can see, the background image doesnt show at all. Even if you set it to 100%, the content that folds down (coloumns from Bootstrap) wont show since the background image doesnt stretch that far.. I have tried height:auto too and that doesn't work either.
Here is a JS Fiddle:
https://jsfiddle.net/du53n862/
Thanks!
You forgot to add float property to main container. You can use vh units for the main container height, and it will fits to every screen size:
#main {
background-image: url("http://itspizzatime.ca/wp- content/uploads/2015/09/4791207-9790062099-Pizza1.jpg");
background-repeat: no-repeat;
background-size: cover;
float: left;
width: 100%;
height: 100vh;
}
Here is a fiddle: fiddle link
I'm not sure if this is the behavior you want, but if you add a height of 100% and a scrolling overflow to your main div, the image will just be a fixed full-cover image in the background. This seems to be working fine in this fiddle.
#main {
height: 100%;
overflow: scroll;
...
}
This issue can easily be solved with flexbox. If you can drop support of older browsers here is the simple solution https://jsfiddle.net/1p1k41ot/.
I just added few lines in #main
#main {
...
display: flex;
flex: 1 1;
height: 100%;
}
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 was given this design that I'm trying to apply to my website. Notice that the <html> element has a background image (hands in the air), that sticks to the bottom of the page.
However, when I migrated the css files over to my application, for some reason this image appears halfway down the page instead. I've checked the relevant CSS and in both cases it's:
html {
background-attachment: fixed;
background-clip: border-box;
background-color: transparent;
background-image: url("../../img/bg.svg");
background-origin: padding-box;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
outline: 0 none !important;
}
so why does the image stick to the bottom of the page here, but appear halfway down the page here.
You have height: 100% set for your html and body. This is normally done to able to have full-height elements. But in this case, this is proving to be the cause of the issue. Removing this it fix the issue.
Check in Firebug or Chrome Inspector and you will see some thing like:
html, body {
height: 100%;
}
Remove it. OR Override it from your style sheet.
It's not working on the 2nd site due to the body { height: 100% } styling.
static/bundle-bundle_responsive_head.css:
html, body {
height: 100%;
}
Looks like the computed height of the 1st link is set such that the image is at the bottom, whereas for the link where the image appears part way down the computed height is much lower.
height: 170px; compared to height: 2006px;
I'm not sure what's setting the height for you, but sorting that out will solve your image problem
Edit:
Actually it seems to be in this rule which is only on one of those sites:
media="screen, projection"
html, body {
height: 100%;
}
It looks like it's actually the background image on the body tag that is not sticking to the bottom. Turning off the height: 100% body rule in bundle-bundle-responsive-head.css fixes it, though I'm not sure how that will affect other things on the site.
I found this by using the DOM inspector in Chrome and turning on/off the rules for the various elements to see what effect they would have.
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.