• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 257
  • Last Modified:

bg image issue on bigger screens

I wonder if there is a way to make my page bg continue all the way down regardless of the page resolution or the main body .

Please excuse my poor description on the issue, please see css and image attached, I can also provide a screenshot.


background: url(../../images/bg/gradientTeal.png) top left repeat-x;

Open in new window

1 Solution
Commonly you will set a background color equal to the color of the last pixel of your gradient. Then when your gradient ends it blends in with the solid background color, the solid background color then repeats as necessary for the page..
You can use the following to make gradient background for body or any other div, Check it:
body {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#4dc4c2'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff, endColorstr=#4dc4c2)";
 /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#4dc4c2)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ffffff,  #4dc4c2); /* for firefox 3.6+ */ }
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now