Background question

[Sunamena]

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

[dsonesuk]

Solid?, gradient?, flexible to content or browser window? Need more input.

[Sunamena]

Like this example (they use a background for this but I wonder if there is a more apropiate way to do this.

 

 

http://hetperspectief.net/index.html

[dsonesuk]

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 { 
content:""; 
position: absolute;
top: 15%; left: 0; right: 0; background-color: white; height: 70%;
z-index: 0;
}
/* end option 2 */

body > * {position: relative; }

Edited April 2, 2016 by dsonesuk

[john256]

Try this one code :

 

<div id="outPopUp"></div>

#outPopUp {

position: absolute;

width: 300px;

height: 200px;

z-index: 15;

top: 50%;

left: 50%;

margin: -100px 0 0 -150px;

background: red;

}