Jump to content

Background question


Recommended Posts

Hey there.




I was wondering if this is possible. This is what i want to achieve on my page (within a div or within a body).



first 15%: color:gray

center 70%: color:white

last 15%: color:gray




Is this possible? How can one achieve this?

Thanks in advance =D

Link to comment
Share on other sites

It can be done simply using position: absolute/fixed; element/s, these elements can have required background.


Your example

body, html {height: 100%;} 

body { background-color: gray; }
/* option 1 with element using id ref body_bg */
body > #body_bg { background-color: white; position: absolute /* or fixed */; height: 70%; top: 15%; left: 0; right:0; z-index:0;}
/* end option 1*/

/*option 2 using content: */
body:before { 
position: absolute;
top: 15%; left: 0; right: 0; background-color: white; height: 70%;
z-index: 0;
/* end option 2 */

body > * {position: relative; }
Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...