SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,200
    Mentioned
    105 Post(s)
    Tagged
    1 Thread(s)

    Offset repeating image

    OK, I know I'm going to kick myself when I see the answer to this, but my brain is fried today and I just can't think of the answer.

    What I want to do is have a header like this:



    for the repeating background, I've got a background picture which I want to repeat if they've got a small screen resolution (ie 1280x1024 or 1600x1200). The background picture is a photo I've taken and doctored to fit the look I want so I want it to start after the logo. I want the header to stretch 100% and the picture to repeat on the X axis if appropriate.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Some rough code:
    Code:
    #header {
      background: url(/images/myrepeat.gif) repeat-x;
      height: 100px;
      /*arbitrary height setting, change to fit your needs*/
      position: relative;
    }
    #header img {
      position: absolute;
      top: 0;
      left: 0;
      /*arbitrary width/height, change to match your image
      or use the width and height attributes of the img tag*/
      width: 80px;
      height: 100px;
    }
    #header h1 {
      /*for text over repeating background
       this keeps the text from being hidden under
       the absolutely positioned logo.
      */
        padding: 10px 20px 10px 100px;
    }
    HTML Code:
    <div id="header">
    <img src="/images/mylogo.gif" alt="logo" />
    <h1>My text that is laid over the background.</h1>
    </div>

  3. #3
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,200
    Mentioned
    105 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by vgarcia
    Some rough code:
    :
    Nope, not quite. I'll demonstrate what I'm looking for with some code using a table which will achieve the result I'm looking for (and I'm probably going to use as a stop-gap):

    css -
    Code:
    .header 
     {
     background-color: #036;
     background-image: url(background.jpg); background-repeat: repeat-x;
     text-align: center;
     }
    table -
    Code:
    <table width="100%" cellpadding="0" cellspacing="0">
     <tr><td width="240px"><img src="logo.gif" /></td>
      <td class="header">Text goes here</td>
     </tr>
    </table>
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Ah, I see now:
    Code:
    #outer {
      height: 100px; /*arbitrary again*/
      position: relative;
    }
    #header {
      margin-left: 240px;
      background: url(/images/repeat.jpg) repeat-x;
    }
    #outer img {
      width: 240px; /*from your example*/
      height: 100px; /*same arbitrary height*/
      position: absolute;
      top: 0;
      left: 0;
    }
    #header h1 {
       padding: 10px; /*whatever, just some extra styles ;)*/
       margin: 0;
    }
    HTML Code:
    <div id="outer">
      <img src="/images/logo.gif" alt="Company name" />
      <div id="header">
        <h1>Some text goes here.</h1>
      </div>
    </div>

  5. #5
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,200
    Mentioned
    105 Post(s)
    Tagged
    1 Thread(s)
    Thank YOU! I knew it was something simple, but I just could not get my brain into css-mode today for some reason.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style


Bookmarks

Posting Permissions

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