Stretching a Header Image

**Susie56** · 05-03-2017, 09:48 PM

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?

**Deadweight** · 05-04-2017, 12:26 AM

Try posting part of your code in https://jsfiddle.net/ to see if we can help with the CSS and what you have.
Thanks

**Susie56** · 05-04-2017, 03:37 PM

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?

**Deadweight** · 05-04-2017, 06:47 PM

No, just hit save then copy and paste that new url in here.

**Susie56** · 05-04-2017, 07:30 PM

https://jsfiddle.net/Susie56/6w1fgkju/1/

**coothead** · 05-04-2017, 08:54 PM

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

**Susie56** · 05-04-2017, 09:25 PM

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

Originally Posted by coothead

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

**coothead** · 05-04-2017, 10:53 PM

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

**Susie56** · 05-05-2017, 07:50 PM

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

**coothead** · 05-05-2017, 08:03 PM

Originally Posted by Susie56

" It's better than the web Builder one and worth the pain lol"

There is no gain without pain.

coothead

Thread: Stretching a Header Image

Thread Tools

Search Thread

Stretching a Header Image

Stretched Header

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

Similar Threads

Simple Image Panner and Zoomer v1.2 not stretching image horizontally

Script stretching out feeds.

Stretching a centered page

my hyperlinks are stretching to fit a div

Problem with Divs not stretching.

Bookmarks

Bookmarks

Posting Permissions