Solved

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

Posted on 2011-03-22

CSS
HTML

1 solution

182 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

Create a responsive confirmation popup using HTML, CSS, jQuery and Promises

Article by: Julian

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises

What makes a professional email signature?

Article by: Exclaimer

Find out what you should include to make the best professional email signature for your organization.

Introduction to HTML (Part 2)

Video by: Jason

HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…