Auto Stretching Linear Gradient Background To Any Browser Resolution

iBall · 03-13-2009, 06:00 AM

Hi,

I could find a answer after google a several times

Anyone know how to let the background looks like http://www.vbulletin.org

No matter how you reduce or increase the browser resolution, it is still showing perfectly by auto scaling and stretching.
????: NamePros.com http://www.namepros.com/web-design-discussion/566742-auto-stretching-linear-gradient-background-any.html

After i checked, it is using a single jpg file as the background
http://www.vbulletin.org/forum/image...ybkgd950px.jpg

so I'm wondering how it works by only stretching 2 end side and remain the center white colour part. and the site content has a fixed width.

hope somebody could help me. thank you

CrazyTech · 03-14-2009, 08:23 AM

http://www.w3schools.com/css/css_background.asp

The answer is there, it's just a fixed background. The idea is to use an image that's tall enough for the large resolutions, but is very thin because you repeat it across the x (horizontal) axis.

hairat angaiz · 03-16-2009, 01:30 PM

Use the CSS for this effect.
background-image: url(http://wac.658e.edgecastcdn.net/80658E/namepros/images/image.gif);
background-repeat: (select one of then)repeat repeat-x repeat-y no-repeat;
background-position: (at your choice) top bottom left right;

Hive · 03-17-2009, 01:22 AM

or you can just use in 1 line as:

background: url(imagelink) top left repeat-x or y;

Regards
Hive

03-13-2009, 06:00 AM	THREAD STARTER #1 (permalink)
iBall New Member Join Date: Mar 2009 Posts: 2	Auto Stretching Linear Gradient Background To Any Browser Resolution Hi, I could find a answer after google a several times Anyone know how to let the background looks like http://www.vbulletin.org No matter how you reduce or increase the browser resolution, it is still showing perfectly by auto scaling and stretching. ????: NamePros.com http://www.namepros.com/web-design-discussion/566742-auto-stretching-linear-gradient-background-any.html After i checked, it is using a single jpg file as the background http://www.vbulletin.org/forum/image...ybkgd950px.jpg so I'm wondering how it works by only stretching 2 end side and remain the center white colour part. and the site content has a fixed width. hope somebody could help me. thank you

03-17-2009, 01:22 AM	#4 (permalink)
Hive Graphic Web Designer Join Date: Jan 2006 Location: Cybertron Posts: 571 Follow @hivedesigns	or you can just use in 1 line as: background: url(imagelink) top left repeat-x or y; Regards Hive __________________ HIVE DESIGNS

	NamePros Design Contests	Forum Sponsorship
	Join in on the FUN! You can start an affordable design contest and pick from entries talented members submit or you can enter a design contest for a chance to win CASH PRIZES! What are you waiting for? Get started in the fun TODAY! - Banners, Logos, Mascots, and MORE! (Please READ the design Contest section rules Prior to starting or entering a contest)

03-14-2009, 08:23 AM	#2 (permalink)
CrazyTech NamePros Expert Join Date: Oct 2004 Location: South Carolina Posts: 5,043	http://www.w3schools.com/css/css_background.asp The answer is there, it's just a fixed background. The idea is to use an image that's tall enough for the large resolutions, but is very thin because you repeat it across the x (horizontal) axis.

03-16-2009, 01:30 PM	#3 (permalink)
hairat angaiz NamePros Regular Join Date: Apr 2007 Posts: 328	Use the CSS for this effect. background-image: url(http://wac.658e.edgecastcdn.net/80658E/namepros/images/image.gif); background-repeat: (select one of then)repeat repeat-x repeat-y no-repeat; background-position: (at your choice) top bottom left right;

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)