I have my html and body set to 100% height, and a background image set on body, which gets cut off when scrolling down, as shown below.
However, YouTube has 100% height on html and body, and a background on body, and it stretches to the full height of the content. How can I achieve this?
If the only reason you put the 100% height is for the background (as one of your comments seems to suggest), then just change that to min-height: 100% and you should have no issues. You will have 100% height on short pages, but expand to as much as you need on longer pages.
You cannot extend an image unless you know the exact total height. The background image is "Extended" to the bottom. Often websites make use of an image that slowly "fades" to a solid color and then the background is set to that solid color.
Another common solution is to mark the background image as fixed so that way it doesn't scroll and thus always shows as expected.
The 100% height on the body is a scam... 8-) It generally represents 100% of the window, not the body.
A background-image will not automatically stretch to fill its container. If you want to create a 'continuous' background, you should use either the repeat-y property (which makes the image repeat vertically), set a background-position: fixed or, in the case of a solid colour, just set a coloured background.
In your case, it looks like your background is a solid colour. Might I suggest just using a plain background colour? It makes your CSS easier to read and change, and it also saves your server some bandwidth.
Related
I'm using a big image as background. However, it always resize automatically(Can't display full height of the img), How to deal with it?
One way is to set its height to the image's height. But when I'm reuse the class for other images, I have to change the height many times.
#HTML
div.img-bg
div.content
#CSS
.img-bg
background-image: .....
DEMO
Try background-size: auto; (the default value)
If you do not resize the background-image and use it's full size, your div.content should be as big as the image height.
So, as far as i understood, you set width to .content, now you can try to set height or min-height to fit the background-image's height.
Without height setted, I guess you have something like on the pic.
UPDATED DEMO
I have a small problem on a website with a background element in CSS that doesn't go below a certain point on page. This is the link where you can see what I'm talking about, in the footer: http://www.stuffforyourdog.com/collegeadvisors/admissions.html
On other pages everything is fine, but on this one I can't figure out why the background image doesn't go all the way down, like it's supposed to.
Your background image's height is too small, if you set
.tail-top2 {
background: url(images/bg2.png) bottom repeat-x;
}
instead of top aligned, you can see that the page is too large for your image. You need to set your background image height to greater than or equal to your largest page height.
I have an image that I want to use as a background-image for my footer. Its sort of a gradient image, so the will be white, and the image will fade from its color, to white. It's not really a repeatable image though.
If I want it to always span the entire width of the page, is this possible without a background-repeat? Or, because of different monitor sizes, will this be impossible?
The background image I want should only be in the footer of the page. Like a sticky-footer, it should always stick to the bottom and the content will push it down as needed. It's about 400px in height.
It could still be a background (positioned bottom-center) but it can;t take up the whole height, just the width. And it need to be able to be pushed down (not fixed)
If you're comfortable using CSS3 you can use
background: #fff url(image.jpg) center center fixed no-repeat;
background-size:cover;
to have the image cover the screen. You'll want to be careful that it is at least a decent resolution though.
If i have a body using a background image and a div inside the body using a set background and color, how can I override the div's style to use the body's background image? I don't want to simply set the background of the div to the image as positioning of the image will be off.
I don't want to simply set the background of the div to the image as positioning of the image will be off.
You mean you want the body's actual background image to be visible (not just the URL being inherited) even though the div has a background color defined? That is not possible.
You would have to give the div a background-color: transparent to make the body's background image shine through.
The W3's background-image documentation specifies that inherit is an invalid declaration for the property.
It seems redundant to post the same information as #Pekka, but his work-around is, probably, the best non-inherit option available; although Eric Meyer's 'Complex Spiral' demo is also an option, which combines position: absolute; with multiple different versions of, essentially, the same background-image to achieve quite an impressive 'tinted/coloured' effect.
I want to build a fixed width website which is 960px wide and aligned to the left. However, I want to use a background which is wider than 960px and that fills the space to the right if the user has a screen wider than 960px.
This is easy using a background image:
body {background:url(myreallywidebgimage.png) 0 0 no-repeat}
#wrapper {width:960px;}
But can I do it where the background is an SVG, without a horizontal scroll bar appearing?
The only thing I can think of that would turn off the horizontal scrollbar is to do something like as follows:
#wrapper {width:960px; overflow-x:hidden}
Edit: Upon further reflection I decided it was best to see if Google offered up an other possible suggestions and I came across this: http://helephant.com/2009/08/svg-images-as-css-backgrounds/. The above solution will only work if you assign the background to that div element. You can, however try assigning overflow-x:hidden to the body itself to see if that solves the problem as well. Hopefully these suggestions help.
The background will scroll only if your SVG image has pixel dimensions which exceeds that of the browser window. If you set the image to have 100% width and 100% height, the background should not scroll.
Take a look at this web site. They're essentially doing what you want. They have an SVG gradient as the background. As you resize the browser, the gradient adjusts to fill the entire window.
http://emacsformacosx.com/
They also have a lot of other SVG on the page, but the background gradient is all you need.