Solved

Hyperlinks on Background Image CSS

Posted on 2013-01-20
11
381 Views
Last Modified: 2013-01-20
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
0
Comment
Question by:Halon
[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
  • 6
  • 3
  • 2
11 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 38798924
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
 

Author Comment

by:Halon
ID: 38798927
Ok, I can live with this. I am unsure how to code it though.
0
 
LVL 83

Accepted Solution

by:
Dave Baldwin earned 300 total points
ID: 38798945
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
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 

Author Comment

by:Halon
ID: 38799479
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38799485
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
 

Author Comment

by:Halon
ID: 38799487
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
 

Author Comment

by:Halon
ID: 38799490
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
 
LVL 53

Assisted Solution

by:COBOLdinosaur
COBOLdinosaur earned 200 total points
ID: 38799530
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
 

Author Comment

by:Halon
ID: 38799869
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
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 38799921
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
 

Author Comment

by:Halon
ID: 38799927
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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

695 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question