background gradient not displaying properly with bootstrap 3 - html

When I add a background color gradient to my web page, it works fine up until the end of the last container in my body element. After that, the gradient stops working and you see a distinct contrast between the end of the container and the rest of the empty page.
To see for yourself:
Download the default web page from layoutit.com and edit css/style.css with:
body {
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #207cca 30%, #2989d8 50%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(30%,#207cca), color-stop(50%,#2989d8), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#207cca 30%,#2989d8 50%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#207cca 30%,#2989d8 50%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#207cca 30%,#2989d8 50%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#207cca 30%,#2989d8 50%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}
The css was generated by http://www.colorzilla.com/gradient-editor/ , so I'm fairly certain it works because it seems to be the popular choice for making a gradient and it works on a non bootstrap page.
Any ideas on how to get the gradient to render through the whole page?
Edit
View an example at http://theshachar.com/so/
Thanks!

Based on your edit, the issue is that the background wasn't extending to the window height.
To solve this, simply add:
html, body {
height:100%;
}
Alternatively, you could also use viewport-percentage units like vw:
body {
height: 100vh;
}
you can also set a min-height:
body {
min-height: 100vh;
}

Related

How do I add custom html code to a wordpress widget so that it's css won't break theme styling?

I want to add such intro (that I have found on Codepen) to my website, i.e. to the top full-width widget on the home page, but its' styles contradict with theme's CSS.
How can I make this work on my home page? Is there any plugin needed for embedding HTML code into the WordPress Text widget, or what? Thank for the answer.
* {
margin: 0;
padding: 0;
}
body {
background: rgb(23,41,58); /* Old browsers */
background: -moz-linear-gradient(top, rgba(23,41,58,1) 0%, rgba(52,73,94,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(23,41,58,1)), color-stop(100%,rgba(52,73,94,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17293a', endColorstr='#34495e',GradientType=0 ); /* IE6-9 */
}
canvas {
display: block;
width: 100%;
}
You can put your carvas tags inside a new tags and edit that CSS class:
<div id="new-id"><carvas></carvas></div>
What I suggest you is download a plugin called "simple css" and change the classes and the Id inside the "simple css" interface, and edit your "new-id" CSS.
new-id {
background: rgb(23,41,58); /* Old browsers */
background: -moz-linear-gradient(top, rgba(23,41,58,1) 0%, rgba(52,73,94,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(23,41,58,1)), color-stop(100%,rgba(52,73,94,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(23,41,58,1) 0%,rgba(52,73,94,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#17293a', endColorstr='#34495e',GradientType=0 ); /* IE6-9 */
}
also you can add a new widget type Text in your sidebar and edit the widget as you want using new CSS classes or ID.
before copy / pasting code I thin you need to look a bit to CSS SELECTOR for understand what the code you copy do in most part.
The codepen you link is composed mostly by JS and a bit of CSS.
Your CSS code focus the all the element (*) and all the content of the page (body), before implementing you need to isolate theses CSS selectors to one div who will load the canvas.
You didn't even talk about the javascript part who his very important in this codepen.
Maybe Try to upgrade a bit you skill code by looking HTML, CSS tutorials for understanding the basics of what you want.

<main> CSS not applying in IE11

So my page is working absolutely fine on FireFox and Google Chrome: http://www.cis130.net/bluehdoj/aboutresponsive
However, the styles I apply to my main tag simply aren't happening in IE11. I tried adding -ms- for the linear gradient but it didn't seem to change anything. If anyone could help me figure this out, I would be very appreciative.
Here's the code:
main {
margin: 0 auto;
padding-top: 5em;
max-width: 1000px;
background-image: linear-gradient(to right, #6E6E6E 50%, #F90 50%);
background-image: -ms-linear-gradient(to right, #6E6E6E 50%, #F90 50%);
min-height: 100%;
overflow: auto;
zoom: 1;
}
and the html:
<main>
<div class="leftCol">
<h2>Color Scheme Changer</h2>
<div class="button" id="changeScheme"></div>
<p>Whatever you do, don't click this button. It's seriously wicked evil. Like the Dirty Bubble, Man-Ray, and Barnacle Boy AKA Every Villian is Lemons evil.</p>
</div><!--Ends left column-->
<div class="rightCol">
<h2>Mirror Mode Button</h2>
<div class="button" id="mirrorMode"></div>
<p>This button, however, is pure good. It once saved a bunch of puppies from a burning building. I would highly suggest pressing it.</p>
</div><!--Ends right column-->
</main>
P.S. this is just a little assignment I've been working on for my into to web dev class and is fine to submit as is but I am a perfectionist plus I would like to know how to avoid the problem in the future.
It s Not supported in IE SOURCE
try HTML5 shiv
<!--[if IE]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Here is a sample of a fully browser compatible gradient. You can modify this as an example to create your gradient.
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
I would also like to add that you should not use background-image but rather just background.
If you want the gradient then using stops at 50% 50% wont work ! because the color stop 1 stops at 50% and stop 2 starts at 50% right in the middle so you see two boxes of orange and grey, however changing it to 0% and 100% will give you exactly balanced gradient.Check the image here.
To visually verify it please check this link from Microsoft itself, where you can generate gradient http://ie.microsoft.com/Testdrive/Graphics/CSSGradientBackgroundMaker/Default.html or check the code below:
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(right, #6E6E6E 0%, #FF9900 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(right, #6E6E6E 0%, #FF9900 100%);
/* Opera */
background-image: -o-linear-gradient(right, #6E6E6E 0%, #FF9900 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, right top, left top, color-stop(, #6E6E6E), color-stop(1, #FF9900));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(right, #6E6E6E 0%, #FF9900 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to left, #6E6E6E 0%, #FF9900 100%);

CSS Control gradient stops

I currently have this
<div id="grad1"></div>
with the css
#grad1 {
height: 300px;
background: linear-gradient(0deg, grey, white);
}
http://jsfiddle.net/9g2zrqse/
im trying to make it just so there is more white then there is grey
You add stops in modern CSS by using % and the color for that stop (I've also included older versions, e.g. webkit-gradient which used the non-standard "color-stop"):
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 21%, rgba(229,229,229,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(21%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 21%,rgba(229,229,229,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 21%,rgba(229,229,229,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 21%,rgba(229,229,229,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 21%,rgba(229,229,229,1) 100%); /* W3C */
You will also notice I used rgba colors instead of "grey" or "white". Using the preset names for colors is a bad idea. It's vague and could be different in every browser.
Have a look HERE (at the Using Multiple Color Stops section)
You could add another grey to your code

Can I create a CSS gradient background for <td> in IE8?

I am using IE 8 and not CSS3 and i'm wondering, I have a few
<td>
tags and I currently the CSS is
td {
background-color: blue;
}
Is there a way to create a gradient for the background of the td's without CSS3 for IE 8? I tried
td {
background-image: -o-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
}
and
td {
background-image: linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%);
}
but neither of them worked for me.
Now, I know that I can give the td a background image and photoshop a gradient but the thing is, my td sizes are not constant, one td might have a 150px height, one might have a 90px height, one might have a 150px width and one might have a 90px width. I need a generic code which will work for all td's regardless of their height and width.
Is there a way to make the background-image of the td to automatically be the width and height of the td even though the td's width and height of the td isn't specified and even though it just depends on how much text is inside the td?
IE 8 does support an old, non-valid, Microsoft-specific CSS gradient syntax. It doesn't offer all the features of proper CSS gradients (e.g. you can't specify stop locations), so you won't be able to exactly match the gradient you've got.
See http://msdn.microsoft.com/en-us/library/ms532997(v=vs.85).aspx
Here's a rough approximation of your gradient:
td {
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#FE856B, endColorStr=#23AB11);
}
When I need to do a css gradient I usually use this site, as it provides you all the css for it to work on all browsers
If you want to display a background texture to a td:
CSS level-2
td {
background-image: transparent url(a-real-image.img) repeat-x 0 0;
}
CSS level-3
td {
background: rgb(30,87,153); /* Old browsers */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
}
CSS proprietary (where 'filter:' will deal with microsoft ie 6-8 [last line])
td {
background: rgb(30,87,153); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
}
You can study over here for -ms-css : http://ie.microsoft.com/TESTDRIVE/Graphics/CSSGradientBackgroundMaker/Default.html

How to generate CSS3 gradient background

I'm working on a website from a PSD. In a section, I've seen that there are a mixed background color. I think It'll be a best way to match the color if I can use CSS3 gradient. But, I can't use CSS3 gradient. So, I took a help of "online CSS3 gradient background generator from image". Look, I want code for this background image:
But, from the online generator I've got this:
Look, the two images aren't same. There are a huge white color on the 1st image at the almost left to right which is absent in the 2nd image. Take a look please, the first image again:
I've used this online generator by uploading image and copy-paste the CSS code which it provided:
You can check the result at this link test link too: http://abidhasan.zxq.net/test/
So, how can I get the perfect CSS3 and cross-browser compatible code for the first image of this question?
The actual section of the PSD is:
Isn't the CSS3 gradient best and shortest way to make the background of that section?
I used ColorZilla's Gradient Editor and the ColorZilla Chrome extension in order to find the upper and lower bounds of the gradients you posted. Then I used the CSS rule sets generated by the gradient editor to make two div elements. I nested one inside of the other, and gave the inner div opacity: .5.
HTML:
<div class="gradient" style="width: 400px; height: 100px;">
<div class="topGradient" style="width: 400px; height: 100px; opacity: 0.5"></div>
</div>
CSS:
.topGradient {
background: rgb(204,204,204); /* Old browsers */
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(255,255,255,1) 22%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(22%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* IE10+ */
background: linear-gradient(to bottom, rgba(204,204,204,1) 0%,rgba(255,255,255,1) 22%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}
.gradient {
background: rgb(224,224,224); /* Old browsers */
background: -moz-linear-gradient(left, rgba(224,224,224,1) 0%, rgba(255,255,255,1) 35%, rgba(204,204,204,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(224,224,224,1)), color-stop(35%,rgba(255,255,255,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(224,224,224,1) 0%,rgba(255,255,255,1) 35%,rgba(204,204,204,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 */
}
The end result was this:
Here's a JSFiddle.