September 26th, 2012, 07:53 PM
|
|
Registered User
|
|
Join Date: Sep 2012
Posts: 1
Time spent in forums: 23 m 12 sec
Reputation Power: 0
|
|
|
Background image resizing with links HELP PLEASE
Hi everyone,
I'm new to all of this so please forgive me if this is basic.
I'm trying to design a simple landing page for my photography website, that is based around an image with the text for links to mailto and tumblr already on it.
I have figured out how to add links etc already...
BUT...
I would like the image to resize with browser resize.
I have managed to get the image to resize, but now the transparent boxes for links stay in the same place.
Please help.
Thanks 
Here is my html and css style sheet.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pete Prokopiw Photography</title>
<link href="style.css" rel="stylesheet" type="text/css" /><style type="text/css">
</style>
<div id="wrapper">
<a href="linkhere"></a>
</div>
</html>
Code:
body {
padding: 0;
margin: 0;
background-size: 100%;
background-color: #000;
background-image:url(web5trans.gif)
background-position: 0px -225px;
}
#wrapper {
background-image: url(web5.jpg);
background-repeat: no-repeat;
width: 100%;
height: 1446px;
background-position: 0px -225px;
background-size: 100%;
position: absolute;
}
a {
display: block;
background-color: #30C;
background-size:100%;
background-image:url(web5trans.gif);
width:100%;
height: 100px;
top: 840px;
left: 79px;
position:fixed;
}
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
