[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 771
  • Last Modified:

CSS3 - background: radial-gradient --stretch height to 100%

hi Experts
I recently discovered this wonderfully low memory alternative to an entire background image that is the CSS3 radial gradient.
here's my website: www.georgehowell.com.au
However, it seems to repeat at the end of whatever content is on the page.. Eg, where the last div tag is, is where the gradient will stop and start again.
Here's my CSS:
http://www.georgehowell.com.au/css/style.css

does anyone know an easy way to make it 100% height in every page. ie, is there a CSS selector or markup to stretch it 100% of the screen / browser window height in every scenario... responsive somewhat?
0
georgehowell
Asked:
georgehowell
1 Solution
 
Jagadishwor DulalBraces MediaCommented:
Change your body style to like fixed and no-repeat Like:

body {
    background: radial-gradient(ellipse at center center , #848484 1%, #000000 100%, #000000 100%) repeat fixed 0 0 ;
    font-family: Marcellus SC,arial,verdana,tahoma;
}

Open in new window

0
 
Julian HansenCommented:
Try adding this
html {
   height: 100%;
}

Open in new window

0
 
georgehowellAuthor Commented:
thanks for your solution Jag
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now