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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Repeating a non-background image

    I am using an image that I would like to repeat 100% horizontally. I would also like to link to another page when someone clicks the image.

    I am able to see the image and also link to another page when the image is clicked but the image does not repeat.

    I tried styling the image with repeat-x and I also used the image as the background image of the border div, but nothing worked.

    If anyone can help me with this, I am grateful.

    html code is

    <div id="border">
    <a href="index.html"><img src="images/border.png" /></a>
    </div>

    css code is

    border{
    margin: 0;
    padding: 0;
    height: 200px;
    }

  • #2
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    Code:
    <div id="border">
    <a href="index.html">My text</a>
    </div>
    css code is

    Code:
    border  {
    	margin: 0;
    	padding: 0;
    	height: 200px;
    }
    border a {
    	margin: 0;
            background:url('/images/border.png') repeat-x;
    	padding: 0;
    	height: 200px;
    }
    or
    Code:
    <div id="border">
    <a href="index.html"><img src="images/border.png"></a>
    </div>
    css code is

    Code:
    border img {
    	background-repeat:repeat-x;
    }

  • Users who have thanked tempz for this post:

    TheNavigator (08-02-2012)

  • #3
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for responding. I tried both of these and neither gave me a repeating image. However, I am able to get the image once.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,485
    Thanks
    6
    Thanked 981 Times in 954 Posts
    Quote Originally Posted by dtpeutaw View Post
    Thank you for responding. I tried both of these and neither gave me a repeating image.
    That is because tempz forgot to put the hash (#) in front of the ID selector:
    Code:
    #border  {
    
    

  • Users who have thanked VIPStephan for this post:

    TheNavigator (08-02-2012)

  • #5
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you VIPStephan and tempz. I was able to get the border to repeat or display once with a link, but was not able to get it to repeat and to link. I want to be able to link to another page from the repeated border.

  • #6
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Quote Originally Posted by dtpeutaw View Post
    Thank you VIPStephan and tempz. I was able to get the border to repeat or display once with a link, but was not able to get it to repeat and to link. I want to be able to link to another page from the repeated border.
    Because the image is being used as a background image, you will have to put your link in or on whatever it is the background for.

  • #7
    New to the CF scene
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you so much DrDos, VIPStephan, and tempz. It is working. Again, thanks.


  •  

    Posting Permissions

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