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..

    How to make a div-Element be visible/hidden by Mouseover

    How to prevent default Css scroll onclick and allow javascript event only?

    Css Trick - How to align this div

    How to display an image in the right upper corner of an input box

    How to reduce this css code [duplicate]

    Javascript: Hover over Issues & How can I structure the html efficiently?

    jQuery, how can i do to toggle a margin

    How to Include CSS and JS files via HTTPS when needed?

    How to override CSS? [closed]

    How to animate my element in my case?

    How to strach div in some line to “all left space” with css

    How to center div using JQuery or CSS

    How to vertically align an image in a container that fills the page?

    How to implement easeOutBack easing in css transform animation

    How to create a loading image sprite using background position

    How to use CSS selectors to retrieve specific links lying in some class using BeautifulSoup?

    How to draw a specific shape in CSS? [closed]

    How do I get the codes of creating the sidebar from this website? [closed]

    How to convert an element css to JSON? [duplicate]

    How can I exclude certain elements from css property that has been applied to their parent without using the style attribute

    How can I do html multi elements list with type attribute?

    How to add custom layout and css in a CakePHP application?

    How to animate a rotated DOM element with CSS

    Using a lot of style sheets. Needing opinions on how to move forward efficiently

    How to make a 2x2 grid of Div's in CSS?

    Big Cartel - Slideshow Questions

    How to use base css file using twig

    How do I style the membership control with css?

    How to create a sub folder on Page?

    Ascii character codes shown as text in browser [duplicate]