I'am wondering If It's possible to have two different colors in the background, expanding 100% with bootstrap, en each side.
Here is a screenshot of what i mean,
Red on the left side, dark on the right side, expanding 100% for bigger screens. Any easy solutions for this?
There are a couple ways to do this. The best way uses pseudo-elements. You'd apply one color to the <body>, and the second color to a created :after element.
HTML:
<body>
<main>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
Page continues...
CSS:
body {
background-color:rgb(155,155,155);
}
body:after {
top:0;
left:0;
width:40%;
height:100%;
position:absolute;
z-index:-1;
background-color:rgb(239,0,0);
content:"";
}
main {
width:80%;
margin:0 auto;
background-color:white;
min-height:400px;
padding:20px;
}
http://jsfiddle.net/Q66Xn/3/
This answer produces the cleanest code. Disadvantages: Limited IE8 support, no IE7 support. If you need to use those two browsers, then see the next option:
Give the <body> the same background color of one side, then instead of using :after to create a pseudo-element, we just create a real element.
HTML:
<body>
<div id="bgleft"></div>
<main>
<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>
Page continues...
CSS:
body {
background-color:rgb(155,155,155);
}
#bgleft {
top:0;
left:0;
width:40%;
height:100%;
position:absolute;
z-index:-1;
background-color:rgb(239,0,0);
}
main {
width:80%;
margin:0 auto;
background-color:white;
min-height:400px;
padding:20px;
}
http://jsfiddle.net/Q66Xn/4/
The produces exactly the same as the first method. The advantage is higher browser compatibility, with a disadvantage of a little bit more code.
Finally, you could use a gradient attached to the body. This will give both colors on the single body element, saving extra HTML, but it'll by a nasty set of CSS to support all browsers:
body {
background: rgb(239,0,0); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iI2VmMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ0JSIgc3RvcC1jb2xvcj0iIzliOWI5YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM5YjliOWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, rgb(239,0,0) 0%, rgb(239,0,0) 44%, rgb(155,155,155) 44%, rgb(155,155,155) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(239,0,0)), color-stop(44%,rgb(239,0,0)), color-stop(44%,rgb(155,155,155)), color-stop(100%,rgb(155,155,155))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* IE10+ */
background: linear-gradient(to right, rgb(239,0,0) 0%,rgb(239,0,0) 44%,rgb(155,155,155) 44%,rgb(155,155,155) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef0000', endColorstr='#9b9b9b',GradientType=1 ); /* IE6-8 */
}
http://jsfiddle.net/Q66Xn/
Disadvantages: Complex CSS which is difficult to easily edit later on.
You're issue isn't related to bootstrap specific, as Ollie stated.
Some of your options are, using a gradient, or a sliver (a 1px width/height image, which you repeat on which ever axis).
I find using a gradient generator works quite well for most of my new projects I need to startup. I've attached an example for you to try.
Example
http://jsfiddle.net/wLw4r/4/
Markup
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 style="color: white">Something</h2>
</div>
</div>
<div class="row ">
<div class="jumbotron">
<h2>YOLO</h2>
<div class="row">
<div class="col-md-4">Something</div>
<div class="col-md-3">Something</div>
<div class="col-md-3">Something</div>
<div class="col-md-2">Something</div>
</div>
</div>
</div>
</div>
</body>
CSS
body {
background: rgb(169,3,41); /* Old browsers */
background: -moz-linear-gradient(left, rgb(169,3,41) 0%, rgb(143,2,34) 26%, rgb(143,2,34) 26%, rgb(0,0,0) 26%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(169,3,41)), color-stop(26%,rgb(143,2,34)), color-stop(26%,rgb(143,2,34)), color-stop(26%,rgb(0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* IE10+ */
background: linear-gradient(to right, rgb(169,3,41) 0%,rgb(143,2,34) 26%,rgb(143,2,34) 26%,rgb(0,0,0) 26%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}
You will struggle to do this using only bootstrap.
You could achieve the result you are after using linear gradients: http://codepen.io/ollieRogers/pen/snjkw this would need a fallback for browsers that do not support gradient bgs.
body{
background: #49191a; /* Old browsers */
background: -moz-linear-gradient(left, #49191a 0%, #49191a 30%, #53cbf1 30%, #53cbf1 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#49191a), color-stop(30%,#49191a), color-stop(30%,#53cbf1), color-stop(100%,#53cbf1)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* IE10+ */
background: linear-gradient(to right, #49191a 0%,#49191a 30%,#53cbf1 30%,#53cbf1 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49191a', endColorstr='#53cbf1',GradientType=1 ); /* IE6-9 */
}
Related
I made a quick jsfiddle to illustrate what I mean.
As you can see the one with the default bg color button face looks 3D, is there a way to replicate this with CSS as other colors than the greyish one buttonface is?
<body>
<button>I have buttonface</button>
<button style="background-color:purple;">I don't have buttonface</button>
</body>
sure you can
HTML
<button class="styled">I don't have buttonface</button>
CSS
.styled {
background: #00d9f6;
/* Old browsers */
background: -moz-linear-gradient(top, #00d9f6 0%, #00a4df 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00d9f6), color-stop(100%, #00a4df));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00d9f6 0%, #00a4df 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00d9f6 0%, #00a4df 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #00d9f6 0%, #00a4df 100%);
/* IE10+ */
background: linear-gradient(to bottom, #00d9f6 0%, #00a4df 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00d9f6', endColorstr='#00a4df', GradientType=0);
/* IE6-9 */
border:1px solid #06f;
box-shadow:inset 1px 1px 2px #fff;
border-radius:5px;
padding:2px
}
fiddle here
EDIT: for those not aware of this, you can make gradients with Colorzilla, that's what I used for the gradients in my code
Not sure if that's what you mean, but you can try outset borders, e.g.
border: 2px outset gray;
Instead of gray use the color you want.
Demo
Yes, the "3D"-like effect on the button is due to the use of gradients on the background. Browsers have a default appearance for buttons, and setting the background-color as you did will somehow disable/override the default browser styles, that's why the second button looks bad. To achieve a similar "3D"-like effect on buttons with different colors, you can use the gradients in your stylesheets using the linear-gradient() function for the background-image property:
/* vendor prefixes omitted */
/* will make this button have a reddish gradient as its background */
.coloredbutton {
...
background-image: linear-gradient(top, #c00, #500);
..
}
Check this fiddle for a demo: http://jsfiddle.net/arnellebalane/240f2vmu/2/
I have this background:
.background:hover {
background: #F4F4F4 url(../images/arrow_down_over.gif) no-repeat right;
}
that I would like to change into a gradient like this one :
.background:hover{
background: -moz-linear-gradient(top, #f4f4f4 0%, #eeeeee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f4f4f4 0%,#eeeeee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f4f4f4 0%,#eeeeee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f4f4f4 0%,#eeeeee 100%); /* IE10+ */
background: linear-gradient(to bottom, #f4f4f4 0%,#eeeeee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f4f4', endColorstr='#eeeeee',GradientType=0 );
} /* IE6-9 */
But I would like to keep the arrow image. I can't find a way to do it. I did try something like this:
background: -moz-linear-gradient(top, #f4f4f4 0%, #eeeeee 100%) url(../images/arrow_down_over.gif) no-repeat right; /* FF3.6+ */
or add this after the gradient properties but without any success.
background: url(../images/arrow_down_over.gif) no-repeat right;
I can't add another class so I have to deal with this CSS. Any idea how to do it?
You may try:
background: url(../images/arrow_down_over.gif), linear-gradient(...);
Multiple backgrounds must be comma-separated rather than space-separated, and they weirdly stack from top to bottom.
Also note that this is not necessarily supported by all browsers.
See http://css-tricks.com/stacking-order-of-multiple-backgrounds/ and https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds for details
I designed a very basic looking box in Photoshop that I would like to use to show product information inside of. It basically consists of a Header, Body and Button (each a separate image) that look like the image below.
How can I use CSS/HTML to piece these together? I just need to show header text in the top box and bullet points in the body area, but not sure how to actually build this from the image files.
I know the HTML will look as such, I am just confused as to how to actually build the box, such as stacking the images and overlaying the button in that position over the body.
<div id="product_box">
<div id="header">Title Here</div>
<div id="body">
<ul>
<li>Point here</li>
<li>Point here</li>
<li>Point here</li>
</ul>
</div>
<div id="button></div>
</div>
Well Have a look at:
http://jsfiddle.net/2A2Fn/4/
You don't have to change your html markup just use css:
Here is relevant CSS:
#product_box{
border:2px solid #bbc;
border-radius:15px;
display:block;
width:50%;
height:100%;
position:relative;
box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
padding:0px; !important
background: #b5bdc8; /* Old browsers */
/* Gradient */
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
background: linear-gradient(to bottom, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}
#header{
background:#aaf;
width:100%;
height:50px;
border:0px;
border-bottom:1px solid #99b;
padding-top:15px;
padding-bottom:15px;
border-radius:5px;
background: #b5bdc8; /* Old browsers */
/* gradient */
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
background: linear-gradient(to bottom, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}
#body{
padding-bottom:15px;
}
#button{
background:#756;
border:1px solid #645;
display:block;
width:150px;
height:50px;
border-radius:5px;
position:absolute;
bottom:-25px;
right:33%;
color:#fff;
box-shadow:5px 5px 5px rgba(0,0,0,0.4);
text-align:center;
font-weight:bolder;
font-size:15px;
background: #b5bdc8; /* Old browsers */
/* Gradient */
background: -moz-linear-gradient(top, #b5bdc8 0%, #828c95 36%, #28343b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(36%,#828c95), color-stop(100%,#28343b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* IE10+ */
background: linear-gradient(to bottom, #b5bdc8 0%,#828c95 36%,#28343b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b',GradientType=0 ); /* IE6-9 */
}
div{
text-align:center;
color:#fff;
font-weight:bold;
}
And Here is output of that:
EDIT
According to your comment here is updated code:
http://jsfiddle.net/2A2Fn/5/
and its output:
Hope it helps.
It can be done using only HTML/CSS.
Use CSS gradient for it.
Here is the DEMO
Seeing your CSS code would help. This is how I would achieve what you want:
Set a div element to the desired height of the box. Apply a border and border-radius property as desired, probably 2 px border and a radius of 10-15 px.
Take the header image, and crop it down to 1 pixel wide (for memory conservation). Then set a div element and use this 1pixel wide image as the background, repeat x, but not y. Set the height of the header to the height of the gradient image.
Then, make another div inside the container div. Take your second gradient image and again reduce it to a 1 pixel width. Set it as the background for this div with repeat-x. You'll have to set the height of the header div to the difference of the height of the header and the height of the container.
Your button can then be placed as a link, probably in another div element.
All this can be coded something like as follows:
CSS:
div.container
{
height: 400px;
width: 300px;
border: 2px solid #000;
border-radius: 12px;
}
div.header
{
background-image: url("header-grad.ext");
background-repeat: repeat-x;
height: 40px;
width: 100%;
}
div.content
{
background-image: url("content-grad.ext");
background-repeat: repeat-x;
height: 360px;
width: 100%;
}
And the HTML:
<div class="container">
<div class="header">text here</div>
<div class="content"><\div>
<div class="button></div>
</div>
This should do what you want. You'll need to specify the button CSS as well which I didn't do as I'm on mobile right now.
Hope this helps you!
Sorry to ask such a stupid question, but it's been quite a long night and I cannot seem to get my code to display the divs on the same line.
I've searched all over Stack Overflow and none of the answers has helped. It might be a very stupid mistake I have done but I haven't noticed it.
<td>
<div class='sameline'>
<?php
echo "<div class='hbox'>Max Health: $hp</div><div class='mbox'>Max Mana: $mana</div>";
?>
</div>
</td>
.hbox {
color:white;
background: #dd0408; /* Old browsers */
background: -moz-linear-gradient(top, #dd0408 0%, #dd0408 0%, #bf0326 0%, #d30407 38%, #b20002 76%, #ba0003 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dd0408), color-stop(0%,#dd0408), color-stop(0%,#bf0326), color-stop(38%,#d30407), color-stop(76%,#b20002), color-stop(100%,#ba0003)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #dd0408 0%,#dd0408 0%,#bf0326 0%,#d30407 38%,#b20002 76%,#ba0003 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #dd0408 0%,#dd0408 0%,#bf0326 0%,#d30407 38%,#b20002 76%,#ba0003 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #dd0408 0%,#dd0408 0%,#bf0326 0%,#d30407 38%,#b20002 76%,#ba0003 100%); /* IE10+ */
background: linear-gradient(to bottom, #dd0408 0%,#dd0408 0%,#bf0326 0%,#d30407 38%,#b20002 76%,#ba0003 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd0408', endColorstr='#ba0003',GradientType=0 ); /* IE6-9 */
text-align:center;
width:45%;
height:16px;
border:1px solid #333;
}
.mbox {
color:white;
background: #00a4f7; /* Old browsers */
background: -moz-linear-gradient(top, #00a4f7 1%, #00b7f9 43%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#00a4f7), color-stop(43%,#00b7f9), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00a4f7 1%,#00b7f9 43%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00a4f7 1%,#00b7f9 43%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00a4f7 1%,#00b7f9 43%,#009ec3 100%); /* IE10+ */
background: linear-gradient(to bottom, #00a4f7 1%,#00b7f9 43%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a4f7', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
text-align:center;
width:45%;
height:16px;
border:1px solid #333;
}
#sameline {
overflow: hidden;
white-space: nowrap;
}
.hbox, .mbox {
box-sizing: border-box;
-moz-box-sizing:border-box; /* Firefox */
display:inline-block;
}
Add float:left to both .mbox and .hbox.
I take it you need the two divs inside <div class="sameline"> to appear next to each other
so a css rule like
.hbox, .mbox {float:left}
Should do it
Just add .sameline div {float: left;}.
(BTW, try to avoid posting PHP when asking CSS/HTML questions, as it makes it harder to read/interpret the code‚though not too difficult here. Get the HTML from your browser's source code, if necessary.)
Also note that sameline is a class, so this won't work unless you change the # to a .:
#sameline {
overflow: hidden;
white-space: nowrap;
}
if you add float: left; to .mbox and .hbox it should work.
Example here.
What I want to do is that the background color will remain the same no matter how big the screen resolution is for the reader. I created a div where its height is set to auto.
.news-box{
margin-top:5%;
border-radius:6px;
background-color: #EEE;
border: 1px solid #EEE;
margin-left: 24%;
height:auto;
width:620px;
}
This how it looks like
And this my CSS rule for the whole html
I am using this body css rule. for my gradient
CSS RULE FOR THE WHOLE PAGE
html
{
height:100%;
}
THIS COMES BEFORE THE .news-box class
body
{
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top, rgba(125,126,125,1) 39%, rgba(14,14,14,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(39%,rgba(125,126,125,1)), color-stop(100%,rgba(14,14,14,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 39%,rgba(14,14,14,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(125,126,125,1) 39%,rgba(14,14,14,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(125,126,125,1) 39%,rgba(14,14,14,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(125,126,125,1) 39%,rgba(14,14,14,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
}
This how the page looks like without the Div
Any way to fix this?
Demo.....................................
Hey now used to min height 100% in you html and body as like this
html, body{
min-height:100%;
}
Demo