Header and Footer Doesn't Reach the Edges of Webpage

Question

I have an image as my header and footer and it does not reach the edges on my webpage. If my browser is full screen, it looks good. But if I shrink down the webpage, then it ends up cutting off on the right side before it reaches the edges.

How can I fix this so that no matter the size of my browser, the header and footer reach from side to side 100% of the way?

I have my HTML in a container so that it doesn't change position when I resize the browser. This is the gist of how my CSS and HTML are set up...

Here is a JSFiddle that shows my problem. If you extend the window, you can see that the header/footer takes up every inch that it should. However, if not, you can see the blank space to the right:

https://jsfiddle.net/t5gb4as7/

CSS:

.container {
      margin: 0 auto;
      width: 1060px;
    }

/* header */
h2 {
    color: transparent;
    background-image: url('header-footer.png');
    width: 100%;
    height: 102px;
    margin-bottom: 20px;
}

/* footer */
h3 {
    color: transparent;
    background-image: url('header-footer-turn.png');
    width: 100%;
    height: 102px;
}

HTML:

<body>

<div class="wrapper">

      <header>
          <h2>test</h2>
      </header>

<div class="container">

    //more
    //html code
    //here

</div>

<div class="push"></div>
</div>

<div class="footer">
<footer>
    <h3>test</h3>
</footer>

</div>

moath naji · Answer 1 · 2017-01-10T18:53:00.640

0

you can use percentage as width to make it responsive like this

width : 100% ;

edited Jan 10 '17 at 18:53

answered Jan 10 '17 at 18:50

moath naji

663
1
4
20

If i do `width: 100%` instead, then my HTML content changes position as I resize my browser. Using `width: 1060px;` I am able to resize my browser while keeping the position of all of my HTML content – Rataiczak24 Jan 10 '17 at 18:52
yes for sure but i think its not best practice to make things static in page that for there are bootstrap and other frameworks to apply responsive design . – moath naji Jan 10 '17 at 18:54
I am going off of what Stack Overflow's website is like...if things move when resizing, it messes up the format and look of my webpage – Rataiczak24 Jan 10 '17 at 18:55
so you need something like this now i understand you http://stackoverflow.com/questions/14526071/how-to-make-a-div-have-a-fixed-size – moath naji Jan 10 '17 at 18:57
You should be setting widths on divs rather than h tags in my opinion. Also setting background images on divs not h tags as I have answered already. – Atrix Jan 10 '17 at 18:58

Atrix · Answer 2 · 2017-01-10T19:32:06.977

-1

I would set the background image on a div, instead of the h2 or h3 tags as you are at the moment. The div width should be 100% and then it will cope with desktop and mobile.

You can use CSS media queries to load in a different background image for different screen sizes if you want to.

#header {
  width: 100%;    
  background-image: url('images/name-of-background-image.jpg');
}

<div id="header">
  <h1>Your header info here.</h1>
  </div>

edited Jan 10 '17 at 19:32

answered Jan 10 '17 at 18:56

Atrix

299
2
6

Could you provide some code on how it should look? I tried to do what you said, and if I understood you right, it isnt working – Rataiczak24 Jan 10 '17 at 19:14
I've added some very basic HTML and CSS to illustrate what I'm talking about. Personally I use a div tag with id="header" rather than the dedicated header HTML tag. You could use the special header tag if you wanted but I think it is only supported by more modern browsers. – Atrix Jan 10 '17 at 19:34

Header and Footer Doesn't Reach the Edges of Webpage

2 Answers2