Background Mapping Question

mackenzilynn · Oct 20, 2011

Hello everyone!

I'm new to web design, and this website as well.. and I have a bit of a snag in my current design.

My goal is to have an image as the background, centered in the middle. That was easy.

Then I looked into how I could map parts of the background image and make them links. Following this tutorial, I am in that process.

I have hover images on each of my links so they change color, my problem is - isn't the background image going to be centered differently on every computer? And if the links are programmed by 'so many pixels to the left' & and 'so many pixels from the top' - won't they be at a different point on the image depending on where the image is centered from computer to computer?

I didn't want to make the background image an actual image - even though mapping that would be a lot easier. Do you think there is any way for me to map the background relatively so no matter where you view it from the links line up?

Just looking for some options as to how to fix this!

Thanks in advance!

Mackenzi

anna · Oct 20, 2011

mackenzilynn said:
Hello everyone!

I'm new to web design, and this website as well.. and I have a bit of a snag in my current design.

My goal is to have an image as the background, centered in the middle. That was easy.

Then I looked into how I could map parts of the background image and make them links. Following this tutorial, I am in that process.

I have hover images on each of my links so they change color, my problem is - isn't the background image going to be centered differently on every computer? And if the links are programmed by 'so many pixels to the left' & and 'so many pixels from the top' - won't they be at a different point on the image depending on where the image is centered from computer to computer?

I didn't want to make the background image an actual image - even though mapping that would be a lot easier. Do you think there is any way for me to map the background relatively so no matter where you view it from the links line up?

Just looking for some options as to how to fix this!

Thanks in advance!

Mackenzi

I think if you make a wrapper (For instance):

#wrapper {
height: whatever;
width: whatever;
margin: 0 auto;
}

div.BodyStyle {
width: 900px;
/* I just threw a random width in there */
height: auto;
position: relative;
}

Any page(s) wrapped with that div i.d. will be centered. I know anytime I want a scalable site that is centered, I use this method and it works. Anytime you set the margin-left: 0 auto; and margin-right: 0 auto; it will center the element. I'm not sure about the image mapping though. I'm sure someone else will help you. Good luck!

PixelPusher · Oct 24, 2011

To be sure your links will always be in the same location no matter what the browser dimensions, I suggest containing the links in a relatively positioned element. The background image, when set to center through the background position css property will function the same as using the auto setting for the margin property for an standard element. The only task remaining is to position the links in their desired place. Using position relative in the container keep all the links relative to the container and not the browser window insuring they will be in the same location every time. The "A List Apart" article is an old article, so if you are going to switch the image for th links during the hover state, I would use and image sprite instead of a separate image for each links hover state. Also, in terms of hiding the text, you simply target the anchor text and use a large text indent.
HTML

HTML:

<body>
  <div id="nav">
    <a href="#" class="link1">Link1</a>
    <a href="#" class="link2">Link2</a>
    <a href="#" class="link3">Link3</a>
  </div>
</body>

CSS

Code:

body {
background:transparent url(../images/yourBgImg.png) center 50px no-repeat;
}
div#nav {
position:relative;
width:960px;
}
div#nav a {
position:absolute;
display:block;
text-indent:-999em;
}
div#nav a:hover, div#nav a:focus {
background:transparent url(../images/linkSprite.png) 0 0 no-repeat;
}
div#nav a.link1 {
top:setVal;
left:setVal;
}
div#nav a.link2 {
top:setVal;
left:setVal;
}
div#nav a.link2:hover, div#nav a.link2:focus {
background-position: 0 -550px;
}
div#nav a.link3 {
top:setVal;
left:setVal;
}
div#nav a.link3:hover, div#nav a.link3:focus {
background-position: 0 -110px;
}

Background Mapping Question

mackenzilynn

New Member

anna

New Member

PixelPusher

Super Moderator