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
    Jun 2012
    Location
    Illinois
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Using 3 background images for one block of text?

    Sorry if the title is confusing, but I could not think of any other way to put it.

    What I am trying to do is use 3 background images for 1 bock of text, which I am trying to use as a title.

    The background images would be: A right image, left image, and a center image which would repeat horizontally across the entire div.

    I'm trying to make the website scale with the browser size. I have no problem doing that, but I was just letting you know so you guys could make sure that whatever advice you give works around that.

    I've uploaded a test site to dropbox to see if any of you could figure out what im doing wrong. I've got it set up like this:

    CSS
    Code:
    h1 {
    	display:block;
    	background-image:url(images/title-right.jpg);
    	background-repeat:no-repeat;
    	background-position:top right;
    	line-height:50px;
    	font-family:Tahoma, Geneva, sans-serif;
    	font-weight:bolder;
    	font-size:18px;
    	color:#ce98fe;
    }
    
    h1 span {
    	display:block;
    	background-image:url(images/title-left.jpg);
    	background-repeat:no-repeat;
    	background-position:top left;
    	line-height:50px;
    }
    
    h1 span span {
    	display:block;
    	background-image:url(images/title-bg.jpg);
    	background-repeat:repeat-x;
    	background-position:top center;
    	line-height:50px;
    	
    }
    HTML
    Code:
    <body>
    <div id="content" align="center">
        
        <h1>
        	<span>
            	<span>My Title Here</span>
            </span>
        </h1>
        
    </div>
    </body>
    The problem is that the repeated image is overlapping the 2 side images.

    Any help would getting this to work would be greatly appreciated. =)

    Download the test site.

    -Jon
    Last edited by Jbknight3; 06-14-2012 at 02:41 PM. Reason: I added the word background to the title. it makes more sense now.

  • #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there Jbknight3,

    and a warm welcome to these forums.

    you do not need three images, just use CSS background-color and border.

    Check out the attachment to see it.

    coothead
    Attached Files Attached Files

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Location
    Illinois
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Wow. That seems way easier! Thank you very much!

    Just out of curiosity, is what I originally asked possible? What if it was a more complicated set of images I was trying to use? If you do know how I could make it work, I would love to know for future reference. =)

  • #4
    New Coder
    Join Date
    Sep 2011
    Posts
    49
    Thanks
    1
    Thanked 15 Times in 14 Posts
    Yes, that is possible Here I've made a working solution for you: http://shares.sitefix.se/s#8ce689e2-...-%20edited.rar

  • Users who have thanked jimutt for this post:

    Jbknight3 (06-14-2012)

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    Hi there Jbknight3,

    check out the attachment, to see an example of three images for the h1 element.

    coothead
    Attached Files Attached Files

  • Users who have thanked coothead for this post:

    Jbknight3 (06-14-2012)

  • #6
    New to the CF scene
    Join Date
    Jun 2012
    Location
    Illinois
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Wow! Thanks to both of you for taking the time to make those for me!! I really appreciate it!!



    Jon

  • #7
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,707
    Thanks
    0
    Thanked 237 Times in 232 Posts
    No problem, you're very welcome.
    coothead


  •  

    Posting Permissions

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