Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    May 2008
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    background image

    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 ?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello silverz,
    You can make the anchor the same size as the body and display: block; , that will make the link work.

    Like this -
    Code:
    <!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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    May 2008
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by silverz View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    May 2008
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes, you can look at my test blog at 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
    Last edited by silverz; 12-13-2010 at 03:29 AM.

  • #6
    New Coder
    Join Date
    May 2008
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Please let me know if this is doable

  • #7
    New Coder
    Join Date
    Dec 2010
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you buddy interesting answer.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by silverz View Post
    Yes, you can look at my test blog at 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 -
    Code:
    * 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;
    }
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #9
    New Coder
    Join Date
    May 2008
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by silverz View Post
    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.

    This isn't usually a very good solution an odd sized browser window can skew the image way out of proportion.
    Another example here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •