Log in

View Full Version : 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...



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
:cool::)


Hi there Susie56,


try it like this...


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...



<!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
" It's better than the web Builder one and worth the pain lol" :)

There is no gain without pain. :D


coothead
framinghouse
05-15-2017, 12:14 PM
Like to say you can check coding of my web page at www.framinghouse.in its having full stretched header with even slider coding . Its simple designing code. Else if you are just looking for simple full stretched header image check out my inner page like this:

http://www.framinghouse.in/canvas-printing.html

Its very simple code and i believe solve your issue . As its all simple On page html coding you should not face any issue

Hope its helps !