1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Header/Logo/Border image help needed...

Discussion in 'HTML & Website Design' started by Skillman13, May 26, 2010.

0
  1. #1
    I'm not 100% sure whether this is HTML/CSS or Javascript...
    So i'm sorry in advanced...

    I have just purchased 2 images (headers)

    One is a image which I plan to have at the top of my page in the center
    Second is a 'buffer image' which I plan to have beside that image -filling the screen until 100% is filled...
    -So it looks like one image along the whole screen/header...

    But I have no idea how do to this?

    Can someone please explain (Or point to a tutorial?)

    Thanks alot...

    James
     
    Last edited: May 26, 2010
    Skillman13, May 26, 2010 IP
  2. Skillman13

    Skillman13 Peon

    Messages:
    229
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Anyone? ...
     
    Skillman13, May 26, 2010 IP
  3. Skillman13

    Skillman13 Peon

    Messages:
    229
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    *I am willing to pay for help :)
     
    Skillman13, May 26, 2010 IP
  4. wab

    wab Member

    Messages:
    57
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #4
    that's html/css.
    you can put the 'buffer image' in the body and the other one in a div

    for your css:
    
body{
   background-image:url('...'); /*url of the buffer image*/
   margin:0px;
}
#header{
  margin:auto;
  background-image:url('...');/*url of the secondimage*/
  width:200px; /*width of the second image in pixels*/
  height:50px;  /*height of the second image in pixels*/
}
    Code (markup):
    and your html code:

    <html>
  <head>
  </head>
  <body>
     <div id="header"></div>
  </body>
</html>
    Code (markup):
     
    wab, May 26, 2010 IP
  5. Skillman13

    Skillman13 Peon

    Messages:
    229
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Ok thats great thanks... but... I dont want the whole background as the buffer image just the whole header you get me...
    So lets say this line is the header: ---------------------------------------------- (say thats like 1024 pixels which fills browser's width, and 100 pixels height -which doesnt fill browsers height, -just abit (the header))
    the buffer image would buffer the left side, then the second image will fill its area, and the buff image would buffer the right side again...
    -Not below or above or the background etc.

    Do you know how to do that?
     
    Skillman13, May 26, 2010 IP
  6. karthimx

    karthimx Prominent Member

    Messages:
    4,959
    Likes Received:
    127
    Best Answers:
    2
    Trophy Points:
    340
    #6 
    body{
   background-image:url('...') repeat-x; /*url of the buffer image with just repeat in x direction*/
   margin:0px;
}
#header{
  margin:auto;
  background-image:url('...');/*url of the secondimage*/
  width:200px; /*width of the second image in pixels*/
  height:50px;  /*height of the second image in pixels*/
}
    Code (markup):
     
    karthimx, May 26, 2010 IP
  7. Skillman13

    Skillman13 Peon

    Messages:
    229
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    It doesn't work: It loops the WHOLE background... can someone fix this?

    URL of code above: www.zombiewrath.com/testlogo.html

    Code:

    <style type="text/css">
    <!--
    body{
    background-image:url('buffer.jpg'); repeat-x; /*url of the buffer image with just repeat in x direction*/
    margin:0px;
    }
    #header{
    margin:auto;
    background-image:url('main.jpg');/*url of the secondimage*/
    width:800px; /*width of the second image in pixels*/
    height:56px; /*height of the second image in pixels*/
    }
    -->
    </style>

    <html>
    <head>
    </head>
    <body>
    <div id="header"></div>
    </body>
    </html>
     
    Skillman13, May 26, 2010 IP
  8. Skillman13

    Skillman13 Peon

    Messages:
    229
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Got it working now:
    background-repeat: repeat-x; needed to be inserted...

    Thanks alot...
     
    Skillman13, May 26, 2010 IP
  9. karthimx

    karthimx Prominent Member

    Messages:
    4,959
    Likes Received:
    127
    Best Answers:
    2
    Trophy Points:
    340
    #9
    yes or you can add it as background:url('buffer.jpg') repeat-x;
     
    karthimx, May 26, 2010 IP
    Skillman13 likes this.
  10. wab

    wab Member

    Messages:
    57
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #10
    And with css3 you can have a background with multiple images:

    
body {
  background:  url('buffer.jpg') top repeat-x, url(main.jpg) top center no-repeat;
}
    Code (markup):
    But it's not compatible with every browsers...
     
    wab, May 28, 2010 IP