...

View Full Version : background image



silverz
12-13-2010, 12:49 AM
Right now, in part of my css file I have the following:

body {
background-color:#000000;
background-image:url("http://www.domain.com/image.jpg");
background-repeat:repeat;
margin:0;
}

Is there a way to code it so that clicking on the image loads another website and for that other website to appear in a new window ?

Excavator
12-13-2010, 01:16 AM
Hello silverz,
You can make the anchor the same size as the body and display: block; , that will make the link work.

Like this -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
background: #000 url("http://www.domain.com/image.jpg");
}
a {
height: 100%;
width: 100%;
display: block;
}
</style>
</head>
<body>
<a href="http://newsite.com/"></a>
</body>
</html>


target is the selector that will make it load a new page but it's deprecated. See why here (http://www.trilithium.com/johan/2005/03/target-blank/).

silverz
12-13-2010, 03:33 AM
Thank you Excavator,

This works in general but the main content of the page is pushed down. Is there a way to keep it from doing that?

Excavator
12-13-2010, 03:44 AM
Thank you Excavator,

This works in general but the main content of the page is pushed down. Is there a way to keep it from doing that?

Yes there is. Can you link us to your test site? Post your code if you can't give us a link.
When posting code in the forum, please use the code tags, &#91;code&#93;&#91;/code&#93; - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.

silverz
12-13-2010, 04:27 AM
Yes, you can look at my test blog at puttouse.com (http://www.puttouse.com/). You will see that once the snow image loads, you will have to scroll down to see where the blog begins. I would like the blog to be at the top of the page, while the sides still being hyperlinked to a second site.

I just realized this is an issue with the Safari and Firefox browsers.

Thank you

silverz
12-13-2010, 07:16 AM
Please let me know if this is doable

weddingflower
12-13-2010, 08:58 AM
Thank you buddy interesting answer.

Excavator
12-13-2010, 10:47 AM
Yes, you can look at my test blog at puttouse.com (http://www.puttouse.com/). You will see that once the snow image loads, you will have to scroll down to see where the blog begins. I would like the blog to be at the top of the page, while the sides still being hyperlinked to a second site.

I just realized this is an issue with the Safari and Firefox browsers.

Thank you

You can bring that back up with absolute positioning.
Try making your CSS look like this -
* The main theme structure */
#access .menu-header,
div.menu,
#colophon,
#branding,
#main,
#wrapper {
margin: 0 auto;
width: 940px;
}
#wrapper {
position: absolute;
top: 20px;
left: 50%;
margin: 0 0 0 -470px;
background: #fff;
padding: 0 20px;
}

silverz
12-14-2010, 08:53 AM
Ok, that works, thank you. Last issue is whether there is a way to have the background picture fit in its entirety width wise. Right now it fits a typical 1280x1024 screen(typically laptops) and about 9/10 of a more square screen(typically desktop). So the question is whether there is a way for the full width of the image to be displayed in either square or rectangular screens.

Excavator
12-14-2010, 12:38 PM
Ok, that works, thank you. Last issue is whether there is a way to have the background picture fit in its entirety width wise. Right now it fits a typical 1280x1024 screen(typically laptops) and about 9/10 of a more square screen(typically desktop). So the question is whether there is a way for the full width of the image to be displayed in either square or rectangular screens.

Since you're already doing the overlay thing with your link it's not a far step to doing the overlay with the image as well. Look at the source code for this resizable background image (http://nopeople.com/CSS%20tips/background_image_resize/index.html).

This isn't usually a very good solution an odd sized browser window can skew the image way out of proportion.
Another example here (http://www.cssplay.co.uk/layouts/background.html).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum