How to not repeat a CSS background gradient
Tags: css,background,gradient,linear-gradients
Problem :
I'm working in a wordpress web, and I have a problem with the background gradient that I have made.
The problem is after the end of the footer, the gradient start again. I don't know how to solve this.
The css code that I do is the next:
body {
background: #FFFFFF; /* old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzMzNjY5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzMzNjY5OSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, rgba(51,102,153,1) 0%, rgba(51,102,153,0) 50%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,102,153,1)), color-stop(50%,rgba(51,102,153,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(51,102,153,1) 0%,rgba(51,102,153,0) 50%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(51,102,153,1) 0%,rgba(51,102,153,0) 50%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(51,102,153,1) 0%,rgba(51,102,153,0) 50%); /* IE10+ */
background: linear-gradient(to bottom, rgba(51,102,153,1) 0%,rgba(51,102,153,0) 50%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#336699', endColorstr='#00336699',GradientType=0 ); /* IE6-8 */
}
And the result (screenshot) is:
Solution :
You can use the background-repeat CSS property:
background-repeat: no-repeat;
Edit: There is a more complete/helpful answer here that provides a couple of different solutions.
CSS Howto..
Your code is actually removing the box causing the flickering, you mouse over, the element is gone and there for the mouse is no longer over it causing it to...
Here is what i have implemented using the two buttons. Your question cant do without jquery scrollTop function function preventDefault(e) { e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue...
Check this fiddle out: http://jsfiddle.net/3PduX/18/ I put display:block to the span, which i think may have been what you missed. Radu Chelariu's idea was even better though. I smashed a...
Give your <input> a transparent background so the background of the <span> can shine thru and remove the border, because the border comes from the <span> in your case; .datePickBox...
You can use each loop. SASS Example @each $i in 0 3 5 10 13 20 30 40 50 60 70 80 90 100 .push-bottom-#{$i} padding-bottom: #{$i}px SCSS Example: @each...
You can solve all your issues with CSS only JSBin here New CSS .rotate { display:block; position:absolute; font-size: 12px; line-height: 18px; font-family: monospace; letter-spacing: 1px; margin: 0; text-align: center; top:45%;...
Quick and dirty, this would work, although I doubt this is best practice. var positiveMargin = false; $('.LoginButton').click(function () { if (!positiveMargin) { var marginTop = "33px"; positiveMargin = true;...
Use protocol-relative paths. Thus not <link rel="stylesheet" href="http://example.com/style.css"> <script src="http://example.com/script.js"></script> but so <link rel="stylesheet" href="//example.com/style.css"> <script src="//example.com/script.js"></script> then it will use the...
This widget shown inside iframe. We can't modify any styles or scripts inside the iframe. Try to get correct size widget in facebook developer account....
Try with the classes angular uses for ng-show ng-hide directives When the element is closing: .my-element.ng-hide-add { ... } When the elements is opening: .my-element.ng-hide-remove { ... } So it...
Use overflow:hidden: #panel { display: block; } #after-top, #location { overflow: hidden; } #languages { float: left; } ...
You can center a div with only css, you set a width and margin the 0 is for top and bottom, auto makes it center. I would also recommend you...
Try to wrap your img in an extra div and then use the following css: #contain { display: table; width: 100%; height: 100%; } #contain div { display: table-cell; vertical-align:...
You can specify your own curve with the -webkit-animation-timing-function CSS property. The format of the function is cubic-bezier(P1x, P1y, P2x, P2y) where P1 and P2 are the two middle points...
Just for fun, I decided to make a pure css implementation of this. html: <div class="img_working"></div> css: @keyframes scroll-background { from { background-position: 0% 0%; } to { background-position: 0%...
The page is not the most friendly in the use of classes and markup, but even so your CSS selector is too specific to be useful here. If you want...
Try to break your shape up in smaller shapes. You could do something like this: Draw a square to serve as the main body for your shape Draw three triangles...
It's the "sharedock.js" : http://code.google.com/p/okgo/source/browse/trunk/Eazy/js/sharedock.js?spec=svn33&r=33 Of course, you will replace the jap/chinese characters with yours....
If you are okay with using a plugin for your task, try this plugin : https://github.com/reworkcss/css-parse Demo:http://bililite.com/blog/blogfiles/cssparser/cssparsertest.php Example: CSS: body {background: #eee;color: #888;} Output: { "type": "stylesheet", "stylesheet": { "rules":...
if your link is always on first cell of your row you could solve with tr td:first-child { white-space : nowrap } a { white-space : normal } (I have...
As said in the comments, you can't do this with the type attribute, and those values are not allowed either (it's upper-latin and lower-latin). You can, however, use a data-*...
You can copy the default layout from cake/libs/view/layouts/default.ctp to app/views/layouts/default.ctp and edit the copied file. (Do not edit anything in the cake folder, only in app.) Stylesheets are in app/webroot/css/....
You have to declare everything on transform. But also you have to note that translate will be rotated, so with the superpower of geometry you can do this: @keyframes cd-mask-wrapper...
Never modify a library directly (css, js, php etc.). What if a new version come out, fixing some bugs. You can not download it, because it will override all your...
There are a lot of issues in your code: There's no element with class desktopGrades in your HTML. Your elements do not have desktopGrades class. CSS is CaSe SeNsItIvE. You...
You can force those arrows to appear on a custom page by adding the following to Customize Design > Advanced > CSS, at the bottom: #page_body .flex-direction-nav a { display:...
If your primary layout that you're extending is in app/Resources/views you can use something like this: {% stylesheets '../app/Resources/public/css/base.css' %} <link rel="stylesheet" href="{{ asset_url }}" /> {% endstylesheets %} ...
You have two options. First - give the Login control some class and use css selectors to access styles of its inner controls: aspx: <asp:Login ID="Login2" runat="server" EnableViewState="true" CssClass="login"> css:...
Here is a very basic example built with jQuery... https://jsfiddle.net/kennethcss/8b4e6o42/ $('.folder').on('click', function(e) { var folder = $(this).find('.sub-folder'); if (e.target !== this) return; if(folder.hasClass('hidden')) { folder.removeClass('hidden'); } else { folder.addClass('hidden'); }...
< and the like are not ASCII character codes, they're HTML entities. And to show them, it's quite simple: escape the & by writing & instead, so write &lt; to...