CSS: Set a background color which is 50% of the width of the window
Older Browser Support
If older browser support is a must, so you can't go with multiple backgrounds or gradients, you're probably going to want to do something like this on a spare div
element:
#background {
position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink;
}
Example: http://jsfiddle.net/PLfLW/1704/
The solution uses an extra fixed div that fills half the screen. Since it's fixed, it will remain in position even when your users scroll. You may have to fiddle with some z-indexes later, to make sure your other elements are above the background div, but it shouldn't be too complex.
If you have issues, just make sure the rest of your content has a z-index higher than the background element and you should be good to go.
Modern Browsers
If newer browsers are your only concern, there are a couple other methods you can use:
Linear Gradient:
This is definitely the easiest solution. You can use a linear-gradient in the background property of the body for a variety of effects.
body {
height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}
This causes a hard cutoff at 50% for each color, so there isn't a "gradient" as the name implies. Try experimenting with the "50%" piece of the style to see the different effects you can achieve.
Example: http://jsfiddle.net/v14m59pq/2/
Multiple Backgrounds with background-size:
You can apply a background color to the html
element, and then apply a background-image to the body
element and use the background-size
property to set it to 50% of the page width. This results in a similar effect, though would really only be used over gradients if you happen to be using an image or two.
html {
height: 100%;
background-color: cyan;
}
body {
height: 100%;
background-image: url('http://i.imgur.com/9HMnxKs.png');
background-repeat: repeat-y;
background-size: 50% auto;
}
Example: http://jsfiddle.net/6vhshyxg/2/
EXTRA NOTE: Notice that both the html
and body
elements are set to height: 100%
in the latter examples. This is to make sure that even if your content is smaller than the page, the background will be at least the height of the user's viewport. Without the explicit height, the background effect will only go down as far as your page content. It's also just a good practice in general.
background color which is 50% of the height of the window CSS
Use min-height
instead of height
:
body { background-image: linear-gradient(#000 50%, #ffffff 0%); min-height: 100vh;}
.blocktest { height: 1500px;}
<div class="blocktest"> test</div>
How to partially color an HTML element's background from bottom to top using CSS?
You can set background: blue
as the first property and change the linear-gradient to the values of white, white
to invert the declaration.
/* I'm interested in filling with a solid color, but in order to partially fill the background, I seem to have to use a dummy gradient to make the color behave as an image */
.test {
background: blue;
width: 50px;
height: 100px;
border: 5px solid black;
background-image: linear-gradient(white, white);
background-size: 100% 50%;
background-repeat: no-repeat;
}
<div class="test"></div>
Half Background color for div
<div style="background-color: #007700; height: 200px; width: 100%"></div>
It's your green background... just put into that div - another three div-s with content, position them absolute and play with margins:
Ready DEMO. It maybe hard to understand, if you are novice in CSS, but google is powerful.
<div style="background-color: #007700; height: 200px; width: 100%">
<div style="margin-left: 1%" class="bubu">1</div>
<div style="margin-left: 33%" class="bubu">2</div>
<div style="margin-left: 65%" class="bubu">3</div>
</div>
and CSS:
.bubu {
position: absolute;
height: 300px;
width: 30%;
margin-top: 50px;
margin-right: 15px;
box-shadow: 0 0 10px 3px rgba(100, 100, 100, 0.7);
border-radius: 10px;
background-color: white;
text-align: center;
padding-top: 10px;
}
*width could be set in pixels, if you need fixed width.
CSS Background-Size doesn't work with static color
You can place a div inside another div. Make both divs have the same height. The inner div will have a background color (red). Then you can set the width of the div some % and thats how much it will be filled in.
This is how twitter bootstrap implements its progress bars. If you want a vertically filling bar I think you can set the height to a % and make the widths the same.
Here is the twitter bootstrap example:
http://cssdeck.com/labs/twitter-bootstrap-progress-bars
Click the details tab to see the source code.
A basic implementation example:
<div style="width:50%">
<div style="width: 50%; background-color:red; text-align:center">Hello</div>
</div>
css percentage based background
You can use gradiant background .
background:linear-gradient(90deg, #EAFEE2 40%, #FFFFFF 50%)
check this link for More information: CSS: Set a background color which is 50% of the width of the window
How to style a div to have a background color for the entire width of the content, and not just for the width of the display?
black magic:
<style>
body { float:left;}
.success { background-color: #ccffcc;}
</style>
If anyone has a clear explanation of why this works, please comment. I think it has something to do with a side effect of the float that removes the constraint that the body must fit into the page width.
Related Topics
Twitter Bootstrap Multilevel Dropdown Menu
Responsive CSS Triangle With Percents Width
How to Select an Nth Child Without Knowing the Parent Element
Css Selector to Select First Element of a Given Class
Changing Font Colour in Textboxes in Ie Which Are Disabled
How to Horizontally Align My Divs
CSS Justify Text, Fill Space with Dots
Hide Div Tag on Mobile View Only
How to Change an Input Button Image Using Css
How to Draw a Circle With Text in the Middle
A Grid Layout With Responsive Squares
Css 3D Transform Doesn't Work If Perspective Is Set in the End of Property
Css Flexbox Not Working in Ie10
Is a Relative Path in a CSS File Relative to the CSS File