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

    How to make header images fit page

    If you look at this site http://bit.ly/3HOBq the larger header image fits the page perfectly and is edge to edge. How would I get a header image to do this?

  • #2
    New Coder
    Join Date
    Nov 2011
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If the header background is a solid color, make a div with a 100% width and give a background color, then place a div inside the other div, center it and fill it with the background image.

    If the background isn't solid, make it the same way, but give the header a transparent fade in each side.

    Solid:
    PHP Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    style type="text/css">
    #header_bg {
        
    height200px;
        
    width100%;
        
    background-color#000;
    }
    #header {
        
    background-imageurl(header_bg.jpg);
        
    height200px;
        
    width500px;
        
    margin-rightauto;
        
    margin-leftauto;
        
    border1px solid #FFF;
    }
    </
    style>
    </
    head>
    <
    body>
    <
    div id="header_bg">
        <
    div id="header">
        </
    div>
    </
    div>
    </
    body>
    </
    html
    Transparent:
    PHP Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <
    head>
    <
    style type="text/css">
    #header_bg {
        
    height200px;
        
    width100%;
        
    background-imageurl(background.jpg);
        
    background-repeatrepeat;
    }
    #header {
        
    background-imageurl(header_bg.png);
        
    height200px;
        
    width500px;
        
    margin-rightauto;
        
    margin-leftauto;
        
    border1px solid #FFF;
    }
    </
    style>
    </
    head>
    <
    body>
    <
    div id="header_bg">
        <
    div id="header">
        </
    div>
    </
    div>
    </
    body>
    </
    html
    Example images attached
    Attached Thumbnails Attached Thumbnails How to make header images fit page-header_bg.jpg   How to make header images fit page-header_bg.png  
    Attached Images Attached Images  


  •  

    Posting Permissions

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