Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Stretching a Header Image

  1. #1
    Join Date
    Jan 2011
    Location
    Cornwall, England
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Smile Stretching a Header Image

    Hi, I was hoping I could get a solution to my website header, it stretches across the website on all my pages, which I achieved in my hosts 'Web Builder' I wanted to do my own website in dreamweaver but I can not get the header to stretch on my own. My website which is how I want it to look is: http://www.9dayweightplan.co.uk - I have the website I have created from scratch on my computer which is formatted much better but I can't get the header to stretch like the one I added on the web builder, and the coding is beyond my understanding. I have googled this but none of the solutions seem to work for me. If it's not achieved with HTML & CSS I thought I would try creating the header as a full page background, and it still doesn't work. I vaguely remember the 'moz' tag which has dimensions, not sure if this is the solution. Can anyone advise please?

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default

    Try posting part of your code in https://jsfiddle.net/ to see if we can help with the CSS and what you have.
    Thanks
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  3. #3
    Join Date
    Jan 2011
    Location
    Cornwall, England
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    I have posted the HTML and the CSS I have, but do I need to register with jsfiddle.net to pass onto you for seeing it?

  4. #4
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    512
    Thanks
    9
    Thanked 61 Times in 59 Posts

    Default

    No, just hit save then copy and paste that new url in here.
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  5. #5
    Join Date
    Jan 2011
    Location
    Cornwall, England
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts

  6. #6
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,545
    Thanks
    1
    Thanked 246 Times in 241 Posts

    Default

    Hi there Susie56,

    try it like this...

    Code:
    
    body {
        margin: 0;
        background: url(http://9dayweightplan.co.uk/onewebmedia/C9FIT-Header.jpg);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% auto;
        background-color: #fff;
     }

    coothead
    ~ the original bald headed old fart ~

  7. #7
    Join Date
    Jan 2011
    Location
    Cornwall, England
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Cool Stretched Header

    Hi,
    It works YAH! Thank you so very very, much. So pleased, I just need to figure out how to bring it down a bit as I wanted the menu at the top like the one I created on the Web Builder.
    This is the one done on the one.com's Web Builder - http://9dayweightplan.co.uk - Is that a simple code?
    Thanks Susie


    Quote Originally Posted by coothead View Post
    Hi there Susie56,

    try it like this...
    Code:
    
    body {
        margin: 0;
        background: url(http://9dayweightplan.co.uk/onewebmedia/C9FIT-Header.jpg);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% auto;
        background-color: #fff;
     }

    coothead

  8. #8
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,545
    Thanks
    1
    Thanked 246 Times in 241 Posts

    Default

    Hi there Susie56,

    try it like this...

    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>untitled document</title>
    <!--<link rel="stylesheet" href="screen.css" media="screen">-->
    <style media="screen">
    body {
        margin: 0;
     }
    #header {
        padding: 1em;
     }
    #fit {
        width: 100vw;
        height: 23.256vw;
        background: url(http://9dayweightplan.co.uk/onewebmedia/C9FIT-Header.jpg);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-size: 100% auto;
     }
    </style>
    
    </head>
    <body> 
     <div id="header">
      <h1>your menu goes in here.</h1>
     </div>
    
     <div id="fit"></div>
    
    </body>
    </html>

    coothead
    ~ the original bald headed old fart ~

  9. The Following 2 Users Say Thank You to coothead For This Useful Post:

    dinge02 (05-22-2017),Susie56 (05-05-2017)

  10. #9
    Join Date
    Jan 2011
    Location
    Cornwall, England
    Posts
    27
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Thank you yet again, almost ready to upload. It's better than the web Builder one and worth the pain lol

  11. #10
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,545
    Thanks
    1
    Thanked 246 Times in 241 Posts

    Default


    Quote Originally Posted by Susie56 View Post
    " It's better than the web Builder one and worth the pain lol"
    There is no gain without pain.

    coothead
    ~ the original bald headed old fart ~

Similar Threads

  1. Simple Image Panner and Zoomer v1.2 not stretching image horizontally
    By grosniko in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 06-22-2015, 08:40 AM
  2. Script stretching out feeds.
    By Sharks in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 05-24-2011, 04:47 AM
  3. Stretching a centered page
    By alxmaverick in forum CSS
    Replies: 8
    Last Post: 09-30-2008, 05:24 PM
  4. Replies: 2
    Last Post: 11-19-2005, 04:07 PM
  5. Problem with Divs not stretching.
    By Beerboy in forum CSS
    Replies: 4
    Last Post: 09-27-2005, 10:52 PM

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
  •