[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 195
  • Last Modified:

How do i use the CSS background property to do this?

Hi guys,

I really need some help with a background on a website. You can see the image here:

Test Background
Now what i want is first of all to have the image placed in the top middle. Then i would like to have something like 10x250px (Width x Height) from the left of the image to be repeated - should a visitors screen resolution be wider than the image it won't seem like the site just stops at the edges.

I've tried several things, but it seems i keep running into different kind of technicalities that I'm not sure how to get around. So I would like to know how you would do it?

(The websites content will be 990px wide if that helps)
0
rogueparagon
Asked:
rogueparagon
1 Solution
 
Gurvinder Pal SinghCommented:
not sure if i have understood, but you can specify the position of the background image
http://www.w3schools.com/css/pr_background-position.asp
0
 
Dave BaldwinFixer of ProblemsCommented:
Here's how to do it.  And it will demonstrate one of the problems.  If the colors are not an exact match like you have with a gradient, you will see the line where the images switch.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
body { 
	margin: 0;
	background-image: url(test-bg-01-1.jpg);
	background-repeat:repeat-x;
	}

#wrap {
	margin-left: auto;
	margin-right: auto;
	background-image: url(test-bg-01.jpg);
	background-position: top center;
	background-repeat:no-repeat;	
	width:1050px;
	height: 350px;
	} 
-->
</style>
</head>
<body>
<div id="wrap">
&nbsp;<br />

</div>
</body>
</html>

Open in new window

test-bg-01-1.jpg
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

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