Background Color Not Working on Short...

User 315488 Photo


Registered User
90 posts

I have a website I'm working on that is having some trouble with the background color. When a page doesn't have a lot of content, the gradient background just stops at a certain point and leaves a light blue color strip at the bottom.
It looks terrible, but I can't figure out what's causing the trouble. It may be the gradient codes I'm using. I just got them from a gradient editor since I'm still learning how to do it myself.

Here's what I believe is the relevant css:
html {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #BDD6E0 0%, #0D3257 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #BDD6E0 0%, #0D3257 100%);
/* Opera */
background-image: -o-linear-gradient(top, #BDD6E0 0%, #0D3257 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #BDD6E0), color-stop(1, #0D3257));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #BDD6E0 0%, #0D3257 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #BDD6E0 0%, #0D3257 100%);
background-color: #0D3257;
padding: 0px 0px 40px 0px;
text-align: center;
}

body {
margin-bottom: 20px;
margin: 0 auto;
position: relative;
border: none;
max-width: 960px;
}


Here is the website page that shows the problem:
http://www.drjoshweight.com/services.php

Any page with enough content makes the gradient expand down and it looks nice.
Can anyone tell me what I'm doing wrong here?
Thanks,

Ron
User 603315 Photo


Registered User
938 posts

FisherRon wrote:
I have a website I'm working on that is having some trouble with the background color. When a page doesn't have a lot of content, the gradient background just stops at a certain point and leaves a light blue color strip at the bottom.
It looks terrible, but I can't figure out what's causing the trouble. It may be the gradient codes I'm using. I just got them from a gradient editor since I'm still learning how to do it myself.

Here's what I believe is the relevant css:
html {
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #BDD6E0 0%, #0D3257 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #BDD6E0 0%, #0D3257 100%);
/* Opera */
background-image: -o-linear-gradient(top, #BDD6E0 0%, #0D3257 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #BDD6E0), color-stop(1, #0D3257));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #BDD6E0 0%, #0D3257 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #BDD6E0 0%, #0D3257 100%);
background-color: #0D3257;
padding: 0px 0px 40px 0px;
text-align: center;
}

body {
margin-bottom: 20px;
margin: 0 auto;
position: relative;
border: none;
max-width: 960px;
}


Here is the website page that shows the problem:
http://www.drjoshweight.com/services.php

Any page with enough content makes the gradient expand down and it looks nice.
Can anyone tell me what I'm doing wrong here?
Thanks,

Ron

Do you need all the bloat, it seems overkill to me. I wouldn't put all the browser info in, when I do these gradients, I just put it in the html and have never had any problems with browsers.
User 603315 Photo


Registered User
938 posts

Weirdly enough I did a gradient for a Chiropodist as well. What I did is just do a very thin line in Photoscape about 5 px and put it in the html{ background-image: url ('bg.jpg'); etc etc

http://i1131.photobucket.com/albums/m555/thenbman/cc.jpg

User 187934 Photo


Senior Advisor
20,181 posts
Online Now

html, body {
margin: 0;
width: 100%;
height: 100%;
}
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 12358 Photo


Registered User
55 posts

Do you need all the bloat, it seems overkill to me. I wouldn't put all the browser info in, when I do these gradients, I just put it in the html and have never had any problems with browsers

It's not really "bloat", there is a purpose ;)
User 2088758 Photo


Senior Advisor
3,086 posts

Hey Ron,

Very nice website! I like the look and feel of it. Colors go well together, very informational, nice visual graphics you did a great job with this design. Other than fixing up your background on some pages you have great website.

Have you tried what Eric suggested?
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2088758 Photo


Senior Advisor
3,086 posts

Eric correct me if I'm wrong but could this little piece of code be interfering with the rest of the css

/* html {
background: url(../images/background.png) repeat;
background-color: #EDE9C1;
padding: 0px 0px 40px 0px;
text-align: center;
} */
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

I test the code I provided by placing it in the css under all the rest of the rules for the html and body as not to change anything else and it worked fine.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 1948478 Photo


Senior Advisor
1,850 posts

Steve wrote:
Eric correct me if I'm wrong but could this little piece of code be interfering with the rest of the css

/* html {
background: url(../images/background.png) repeat;
background-color: #EDE9C1;
padding: 0px 0px 40px 0px;
text-align: center;
} */

That code has been 'commented out' and couldn't interfere with anything... ;)
User 2088758 Photo


Senior Advisor
3,086 posts

Per wrote:
Steve wrote:
Eric correct me if I'm wrong but could this little piece of code be interfering with the rest of the css

/* html {
background: url(../images/background.png) repeat;
background-color: #EDE9C1;
padding: 0px 0px 40px 0px;
text-align: center;
} */

That code has been 'commented out' and couldn't interfere with anything... ;)


palm(((face)))) do'h!!
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.