Solved

bg image issue on bigger screens

Posted on 2011-09-27
2
228 Views
Last Modified: 2012-05-12
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.

CSS

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

Open in new window

gradientTeal.png
0
Comment
Question by:TonyReba
2 Comments
 
LVL 16

Expert Comment

by:JF0
ID: 36713279
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..
0
 
LVL 16

Accepted Solution

by:
SSupreme earned 250 total points
ID: 36714063
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+ */ }
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

"In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
This article will inform Clients about common and important expectations from the freelancers (Experts) who are looking at your Gig.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question