Hyperlinks on Background Image CSS

I have been fighting with this for a few hours but cannot find a combination that works. Excuse my newb CSS code please, learning.

I have a web page with an image as a background sized 1920 X 920. I need to have the image stay centered horizontal and vertical no matter the resolution. This code is below, seems to work OK but it does not centre vertically.
body {
	line-height: 1;
	color: black;
	background: white;
	background: url(../img/tdb/locker-60.jpg) fixed center center no-repeat;	
	background-position: top;
	background-repeat: repeat-x;
	background-color: #e8e3D0;
	font-family: Georgia, serif;
}

Open in new window

I now have three links that need to placed at specific positions on the image, I can do that with divs and margins (although I think that's wrong). The big issue is that when the user resizes the window the links move.
.content-landing-Build 
{
    float: left;
   	width: 330px;	
	height: 163px;
	margin: 295px 5px 15px 320px;/*top, right, bottom, left*/
	 background-color:black;
    color:white;

}

Open in new window

<div class="content-landing-Build">
                        Build Drill 
                    </div>

Open in new window


Is there a way to add href's to the image and keep them in the exact position at all times?

Code or example tutorials would be great from a blank slate as I am learning as I go.

I would like to include IE8 unfortunately.

Cheers
Winston SmithDeveloperAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Dave BaldwinConnect With a Mentor Fixer of ProblemsCommented:
Here is a template file that you can use for testing.  Note that if you can put your background image in the #wrapper div aligned 'center top' (instead of the 'body'), it will stay put relative to the content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>CSS Positioning Puzzle</title>

<style type="text/css" >
body {margin:0;}
div {
	border: 3px rgb(135,135,135) solid;
	padding:5px;
	margin-bottom:10px;
}

h1 {
	text-align:center;
}

#wrapper {
	width:1002px;
	margin:0px auto;
	border:0px;
	padding:0px;
	background-color: #f7f7f7;
}

#leftcol {
	width:496px;
	float:left;
	padding:0px;
	border:0px;
	margin:0px;
}

#rightcol {
	width:496px;
	float:right;
	padding:0px;
	border:0px;
	margin:0px;
}

#comments{
	width:150px;
	margin-right:10px;
	float:left;
}
  
#faq{
	width:300px;
	float:right;
}
  

  
#footer{
	clear:both;
}
</style>
</head>

<body>

<div id="wrapper">
	<div id="header">
		<h1>Header</h1>
	</div>

	<div id="leftcol">
		<div id="intro">
			<h1>Intro</h1>
			<p>Mus, cus, aut qui blaut eum ipsandi taquunt reperrorest magnimi nihilla dolorrorrum exero doloreptiam eum quam sapid moditati deraerr ovitatis rem reped quibus, ius renduntem is earianducias excesti core nus rae a sinimi, quatemquid que conse doluptatur</p>
		</div>
		
		<div id="comments">
			<h1>Comments</h1>
<p>Mus, cus, aut qui blaut eum ipsandi taquunt reperrorest magnimi nihilla dolorrorrum exero </p>		</div>
		
		<div id="faq">
			<h1>FAQ</h1>
			<p>Mus, cus, aut qui blaut eum ipsandi taquunt reperrorest magnimi nihilla dolorrorrum exero doloreptiam eum quam sapid moditati deraerr ovitatis rem reped quibus</p>
		</div>
		
		</div>	

	<div id="rightcol">
		<div id="vote-form">
			<h1>Vote-Form</h1>
			<p>Mus, cus, aut qui blaut eum ipsandi taquunt reperrorest magnimi nihilla dolorrorrum exero doloreptiam eum quam sapid moditati deraerr ovitatis rem reped quibus, ius renduntem is earianducias excesti core nus rae a sinimi, quatemquid que conse doluptatur</p>
			<p>Mus, cus, aut qui blaut eum ipsandi taquunt reperrorest magnimi nihilla dolorrorrum exero doloreptiam eum quam sapid moditati deraerr ovitatis rem reped quibus, ius renduntem is earianducias excesti core nus rae a sinimi, quatemquid que conse doluptatur</p>
			<p>Mus, cus, aut qui blaut eum ipsandi taquunt reperrorest magnimi nihilla dolorrorrum exero doloreptiam eum quam sapid moditati deraerr ovitatis rem reped quibus, ius renduntem is earianducias excesti core nus rae a sinimi, quatemquid que conse doluptatur</p>
			
		</div>
	</div>

	<div id="footer">
		<h1>Footer</h1>
	</div>
</div>

</body>
</html>

Open in new window

0
 
Dave BaldwinFixer of ProblemsCommented:
Sorry, you have conflicting requirements.  If you center the background image vertically, everything else will always move when the window gets resized because the content is going to be positioned relative to the top of the window not the center.  

The only way to get everything to stay put is to horizontally center both the background and the content and align them vertically to the top of the window so that you have a strip down the middle of the image and page that stay stuck together.
0
 
Winston SmithDeveloperAuthor Commented:
Ok, I can live with this. I am unsure how to code it though.
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
Winston SmithDeveloperAuthor Commented:
OK, that seems to be part of what I need. I added my image to the wrapper class
#wrapper {
	width:1920px;
	height:920px;
	margin:0px auto;
	border:0px;
	padding:0px;
	background: url(../img/tdb/locker-60.jpg) center top no-repeat;
	/*background-color: #f7f7f7;*/
}

Open in new window

And now moving the size of the screen keeps all the divs you created in place, PERFECT!!

But how do I place the divs over the area of the image I want? And how would I make the div area a link? I can make the text a link but don't know how to make the entire div area so the user has an area to click.

Sorry for the multiple of questions, just a little lost in the "relative, float, margin" positioning world
0
 
COBOLdinosaurCommented:
If the content is text then the positioning can still get messed up by user font settings.  Trying to position content to align with a background is a fool's game.  There are just too many ways for it to get messed up including cross-browser and cross-version issues.  

You might be able to keep it in the general location, but if pixel precision is necessary; not going to happen except for the specific setup you are using to develop with.  

Cd&
0
 
Winston SmithDeveloperAuthor Commented:
I can add the following to the class to place the div where I wish
	#comments{
	 	width: 330px;	
	height: 163px;
	margin: 295px 5px 15px 320px;/*top, right, bottom, left*/
	 background-color:black;
    color:white;
}

Open in new window

But it moves all the other divs around of course
0
 
Winston SmithDeveloperAuthor Commented:
The content is an image, no text. I simply need an area that is clickable, no text. Should I be looking to do this another way perhaps?
0
 
COBOLdinosaurConnect With a Mentor Commented:
If the links are images, then you could use a graphics program to place them on the the main image and use it as an image map .  Not the most modern technique, but nothing will move around if the whole thing is one image.

Cd&
0
 
Winston SmithDeveloperAuthor Commented:
You know, I thought of that but since I had not even heard it mentioned in a decade it seemed perhaps dead to me. Its only for one page and one purpose so maybe an old dinosaur will work in this case. Thanks!
0
 
Dave BaldwinFixer of ProblemsCommented:
I have a customer that uses image maps all the time because he's pretty good with Photoshop (which will generate that for you) and not so good with HTML page layout.
0
 
Winston SmithDeveloperAuthor Commented:
I am playing with CSS imagemapping. Looks like it, combined with your @DaveBaldwin's template, will be the answer. Thanks for all the help !!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.