Background to fit page

[goodkel]

Forum URL: wlsctest.proboards.com/


I have this at the bottom of my style sheet but, while helpful for other purposes, it does not stretch my background down to fit the page. It is pretty large, just not quite enough. There is a black band near the bottom and then it repeats.

body {
background-size: 100%;
}

But what I would like to do is something like this that will stretch the image out in all directions to fit. But, this is html:

html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

What can I do to make this work?

Thank you!

Kelly

[Teg]

Try this, it works on my forum here hphogwarts.com

body {
font: 9pt/10pt 'Oxygen,' verdana;
background-color: #181e1a;
background: #050605 url('http://storage.proboards.com/6214340/i/p0V6QTLY3b9L9S09mHiu.png') no-repeat;
background-size: 100% auto;
color:#ffffff;
font-family: 'oxygen',verdana;
text-align: left;
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}

Now you don't have to use all of that but the bg part and width and height. Replace image url with ur own

[Tumbleweed]

Actually, Teg, I don't think yours does fill the whole screen. At least I see a line where it appears to stop right above the area that says: CHECK OUT SOME OF THE LATEST TOPICS

Anyway, goodkel, you should be able to use that just using body instead of the html

body {
background: #050605 url('http://i60.tinypic.com/2wd6kaw.png') no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}

Very pretty picture by the way.

[Teg]

May 24, 2015 1:35:14 GMT -8 Tumbleweed said:

Actually, Teg, I don't think yours does fill the whole screen. At least I see a line where it appears to stop right above the area that says: CHECK OUT SOME OF THE LATEST TOPICS

Anyway, goodkel, you should be able to use that just using body instead of the html

body {
background: #050605 url('http://i60.tinypic.com/2wd6kaw.png') no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}

Very pretty picture by the way.

That's only because I have it set to no-repeat as I wanted it that way. LOL But it does stretch the entire width of the page.

[goodkel]

May 24, 2015 1:35:14 GMT -8 Tumbleweed said:

Actually, Teg, I don't think yours does fill the whole screen. At least I see a line where it appears to stop right above the area that says: CHECK OUT SOME OF THE LATEST TOPICS

Anyway, goodkel, you should be able to use that just using body instead of the html

body {
background: #050605 url('http://i60.tinypic.com/2wd6kaw.png') no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed;
}

Very pretty picture by the way.

Thank you. It isn't the style I was going for at all until I came across that picture and changed my mind about everything. I intend to apply a custom page portal that should show it off even more.

Anyway, it worked! Thank you SO much!