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

    Two header images

    Hi,

    Please see picture attached. I am new to CSS and unsure how to link two images together to make up the header. I have done two <img> html but this does not work very well.

    As shown the image does not meet the top of the page how can I move it up? How can I also make the image 2 stretch to the full width of the users screen.

    Thanks.
    Attached Thumbnails Attached Thumbnails Two header images-css.png  

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Can you show your code and what you've tried?

    Is the actual image as you've posted above? or is it like 50px wide. If so you'd want to repeat it on the x axis.
    Teed

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    To bring the images closer to the page add

    Code:
    * {
        margin:0;
        padding:0;
    }
    Worked really good, but to make the image 2 fill all the width of page im stuck with I tried

    Code:
    width: auto;
    and
    Code:
    width: 100%;
    Neither worked but I dont really know what I am doing

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    You haven't posted your code you have so far. If you put the image as the background of the div, then the css would be:

    background-image: url(images/someImage.jpg);
    background-repeat: repeat-x;
    Last edited by teedoff; 04-13-2011 at 01:53 AM.
    Teed

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi this is my current code

    Code:
    <link rel="stylesheet" href="style.css" type="text/css">
    <img src="images/headerleft.gif" class="headerimage" /><img src="images/headerright.gif" class="headerimage" />
    CSS
    Code:
    * {
        margin:0;
        padding:0;
    }
    Now the two images join perfectly and now they start at the top of the page but the right image I want stretched out to the entire width of the page, unsure how as it will vary depending on persons resolution or windows size i guess

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there TheCase,

    check out the attachment to see a possible solution.

    coothead

    &#160;
    Attached Files Attached Files

  • #7
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,680
    Thanks
    0
    Thanked 230 Times in 225 Posts
    Hi there TheCase,

    if you want the header to consist of two sections then use this code...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title></title>
    
    <style type="text/css">
    body{
        padding:0;
        margin:0;
     }
    #left {
        float:left;
        width:115px;
        height:344px;
        background-image:url(header-bg.jpg);
        color:#fff;
        text-align:center;
     }
    #right {
        margin-left:115px;
        height:344px;
        background-image:url(header-bg.jpg);
        background-position:-115px 0;
        color:#fff;
        text-align:center;
     }
    </style>
    
    </head>
    <body>
    
    <div id="left">left</div>
    <div id="right">right</div>
    
    </body>
    </html>
    
    coothead

  • #8
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    5
    Thanks
    1
    Thanked 1 Time in 1 Post
    body{
    padding:0;
    margin:0;
    }

    Also set width to auto and you can do it by stretching background image.

  • #9
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks all got it working now

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

  • #11
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    To just let you know what he did:

    By adding float: left; to your CSS, your images will align side by side - they are "floating" towards the left side. If you want them at the right side just change it to float: right;.


  •  

    Posting Permissions

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