Solved

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

Posted on 2011-03-22

CSS
HTML

1 solution

179 Views

Last Modified: 2013-09-15

Hi guys,

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

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)

Comment

Question by:rogueparagon

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

4 Comments

LVL 40

Expert Comment

by:gurvinder372

ID: 351949582011-03-22

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

LVL 83

Accepted Solution

by:Dave Baldwin

Dave Baldwin earned 500 total points

ID: 351951472011-03-22

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

Featured Post

Question has a verified solution.

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

CSS Best Practices

Article by: Experts Exchange

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…

Email Signature Size - Best Practice

Article by: Exclaimer

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.

Rounded Corner Effect in CSS

Video by: Sarah

In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

Introduction to CSS (Part 1)

Video by: Jason

The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…