4 Replies - 984 Views - Last Post: 17 February 2012 - 12:41 AM

#1 Craytor  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 16-February 12

Problem, Question :: How to make a dynamically expanding background.

Posted 16 February 2012 - 04:15 PM

I am trying to make a dynamically expanding background. I'm not sure if this is possible but other sites I have been on do this. I want A background image that changes as the browser goes down, like dark in the top going to light, and light going to dark. How would you make the light part expand as you add content?

Any help would be greatly appreciated!
Is This A Good Question/Topic? 0
  • +

Replies To: Problem, Question :: How to make a dynamically expanding background.

#2 Skaggles  Icon User is offline

  • THE PEN IS MIGHTIER
  • member icon





Reputation: 251
  • View blog
  • Posts: 640
  • Joined: 01-March 09

Re: Problem, Question :: How to make a dynamically expanding background.

Posted 16 February 2012 - 04:44 PM

It sounds like you are referring to a background gradient, which isn't really a standard in CSS and requires a line of code in your CSS file for each type of browser that you are targeting. I guess one way you can do this is by setting the default background the the body to the end color of your gradient and then create a div with the gradient as its background. The height of the div should determine how far down the gradient fades into the body's default background. Here's an example:

body {
    background: #fff;
}

header {
    width: 100%; height: 400px;
    background: -moz-linear-gradient(top,  #000,  #fff); /* for firefox 3.6 and higher */
    background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#fff)); /* for webkit browsers */
}


Was This Post Helpful? 0
  • +
  • -

#3 Craytor  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 16-February 12

Re: Problem, Question :: How to make a dynamically expanding background.

Posted 16 February 2012 - 04:53 PM

Okay... Not exactly where I was getting to... Like for example, I have a few pages for examples.

#1: http://www.viget.com/inspire/
#2: http://www.viget.com/extend/

Im trying to figure out how to make the header have the brown after it and extend until the footer comes, and if the middle content extends, then the brow will expand...
Was This Post Helpful? 0
  • +
  • -

#4 Skaggles  Icon User is offline

  • THE PEN IS MIGHTIER
  • member icon





Reputation: 251
  • View blog
  • Posts: 640
  • Joined: 01-March 09

Re: Problem, Question :: How to make a dynamically expanding background.

Posted 16 February 2012 - 04:58 PM

Ah, so this will require some work with editing the images. Creating an image that fades into the background color of the page would just be an image with a transparency gradient, with the bottom of the image fading to complete transparency. The first link looks similar, but also has a second background that is tiled vertically, which the header image being completely separate.

This post has been edited by Skaggles: 16 February 2012 - 04:59 PM

Was This Post Helpful? 0
  • +
  • -

#5 snoj  Icon User is offline

  • Married Life
  • member icon

Reputation: 84
  • View blog
  • Posts: 3,564
  • Joined: 31-March 03

Re: Problem, Question :: How to make a dynamically expanding background.

Posted 17 February 2012 - 12:41 AM

If you take a look at the 'extend' source you can see the grass is a background image and is set to repeat-x on the body tag, the same with the footer which overlays the body. Additionally the CSS background color is the same as the bottom and top of the top and footer areas. I am guessing a similar technique for 'inspire'.

The following is only an example to help illustrate the point. It is by no means tested and probably runs counter to what HTML gurus and HTML5 docs say you should do.

<body style="background: cyan url(page_top.img) top repeat-x;">
	<div></div>
	<div>Page content</div>
	<div class="foot" style="background: cyan url(page_bottom.img) top repeat-x;">
		<div class="seobar" style="background: white;">A bunch of stuff like tag clouds, mini site map and shit to increase SEO.</div>
		<div class="copyright_notice">(c) 2012 Public Domain</div>
	</div>
</body>


Was This Post Helpful? 1
  • +
  • -

Page 1 of 1