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 8 of 8
  1. #1
    Senior Coder
    Join Date
    May 2006
    Posts
    1,680
    Thanks
    28
    Thanked 4 Times in 4 Posts

    How do I make my header graphic position better ?

    Hi,

    I have finished my website, and it has a nice graphic banner at the top.

    The dimensions are 998px × 126px

    The image is set as a background image so that I can add the
    header text on the left-hand side.

    Here is what it looks like:
    Express Response

    Now if my window is only 1000px wide then it looks great, but any wider
    and the back ground image repeats. That repeating doesn't look very professional.

    What do you suggest I do ?
    Should I have a wider image - maybe 1400px ?

    Problem with that is that the rest of the layout is designed to look
    best for a 1000px layout. If image is wide I will get scroll bars and
    a lot of empty space when the window is smaller.

    I could auto resize the window to 1000px - but I think users don't like that.

    Is there away to make the image "expand" over the width of the screen ?

    Any suggestions ?


    Thanks.



    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #2
    New Coder
    Join Date
    Jun 2012
    Posts
    36
    Thanks
    9
    Thanked 1 Time in 1 Post
    You can either set the

    background-repeat:none;

    or you could center it and make it the same width as the footer and set
    margin-left:auto; and
    margin-right:auto;

  • #3
    New Coder
    Join Date
    Jun 2012
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Try using background-size: 100%;

  • #4
    New Coder
    Join Date
    Jun 2012
    Posts
    36
    Thanks
    9
    Thanked 1 Time in 1 Post
    ^you could, but the image may look pixelated.

  • #5
    New Coder
    Join Date
    Jun 2012
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    That's true, what it does is stretches your image to fill the width of the container/browser.

    I took a look at your site with that setting and it looks good on my 1200x900 resolution. Some viewers with very large resolutions could see some distortion though, depends.

    I'd suggest making another image with larger dimensions.

  • #6
    Senior Coder
    Join Date
    May 2006
    Posts
    1,680
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Hi,
    Thanks for your replies,

    This is the code I already have for the background header image.

    As you can see I already have width = 100%
    so I was surprised to get a reated image, I thought it would stretch.

    In css:

    Code:
    #header { 
      width: 100%; 
      height: 126px; 
      background: url("http://expressresponse.net/sys_images/banner4.png");
     }

    And the HTML:

    Code:
    <div id="header">
    <h1 style="float:left; margin:20px 0 0 30px; color: #981b15; font-size: 36px;"><i>Express Response</i><br>
    <span style="color: #000; font-size: 22px;">ExpressResponse.net</span></h1>
    </div>



    I tried adding no repeat like this:


    In css:

    Code:
    #header { 
      width: 100%; 
      height: 126px; 
      background: url("http://expressresponse.net/sys_images/banner4.png");
      background-repeat:none;
     }

    But nothing changed.

    Any more ideas ?

    Thanks.



    .
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.

  • #7
    New Coder
    Join Date
    Jun 2012
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    jeddi, replace your header css with the following:

    Code:
    #header { 
      width: 100%; 
      height: 126px; 
      background: url("http://expressresponse.net/sys_images/banner4.png");
      background-size: 100%;
     }

  • #8
    Senior Coder
    Join Date
    May 2006
    Posts
    1,680
    Thanks
    28
    Thanked 4 Times in 4 Posts
    Thanks,

    That seems to be the best option.
    If you want to attract and keep more clients, then offer great customer support.

    Support-Focus.com. automates the process and gives you a trust seal to place on your website.
    I recommend that you at least take the 30 day free trial.


  •  

    Posting Permissions

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