ALWAYS Center Background Image

  • jammer2552
  • Graduate
  • Graduate
  • User avatar
  • Posts: 139

Post 3+ Months Ago

I currently have an issue with the effect I'm trying to achieve on the footer.

If your screen is over 1200px wide then you won't notice the bug, but if you resize your browser window to 1199px wide or smaller you will notice that the footer is simply being pushed over once the screen reaches 1000px. I am trying to keep that section centered with the rest of the page (ShellHeader, ShellContent).

What is the method to have that div (ShellFooter) stay centered on the screen despite the browser dimensions? I have seen it done before. I would like to think that it's not just simply a background-image in body{} with background-position: bottom center...

(www)(dot)jameschurchard(dot)(com)/demo/neecetire/
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

Give your footer div a fixed width and then give it a margin of 0 auto

This will force the div to center. So

Code: [ Select ]
#footer{width:800px; margin: 0 auto;}
  • jammer2552
  • Graduate
  • Graduate
  • User avatar
  • Posts: 139

Post 3+ Months Ago

graphixboy wrote:
Give your footer div a fixed width and then give it a margin of 0 auto

This will force the div to center. So

Code: [ Select ]
#footer{width:800px; margin: 0 auto;}


Hmm... that doesn't seem to work in FF3.5 or IE8.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

Oh I see what the problem is. Essentially your footer is the widest part of the page therefore causing the scroll when the screen gets smaller than your footer. In that case you will have to give the footer a background that is centered via css. Or create a smaller footer.
  • jammer2552
  • Graduate
  • Graduate
  • User avatar
  • Posts: 139

Post 3+ Months Ago

Creating a smaller footer would defeat the purpose of the effect I am trying to achieve. ;)

Code: [ Select ]
#ShellContentBottom { background:url(../i/dark/ShellFooter.gif) no-repeat top center;
    width:1200px;
    height:300px;
    color:#ffff00;
    font-size:0.8em;
    padding-top:160px;
    margin:0 auto;
}
  1. #ShellContentBottom { background:url(../i/dark/ShellFooter.gif) no-repeat top center;
  2.     width:1200px;
  3.     height:300px;
  4.     color:#ffff00;
  5.     font-size:0.8em;
  6.     padding-top:160px;
  7.     margin:0 auto;
  8. }


Perhaps another approach would be for the background-image to spill over the boundaries of the div. So if I were to reduce the #ShellContentBottom to 1000px, the background-image is 1200px but still shows all 1200px of the background-image.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

is #shellcontentbottom wrapped in another div that centers the site? If so you might need to pull it outside of that wrapper. Then remove the margin and width from your css and you should get the effect you want.
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

jammer2552 wrote:
Creating a smaller footer would defeat the purpose of the effect I am trying to achieve. ;)


Maybe you need to rethink what you are doing then. Many, if not most, people, do not view the web at 1200px width, so either you are making this page just for yourself on your own monitor, or you are taking reality into account.

Use width: 100% and then tinker with the content until it works in a satisfactory way for all widths from say 750px up to 1400px.

If the issue is the background image, here's the way I've managed it: You create two identical divs, one on top of the other. The bottom one just contains the image you want as the "background", and the top div:
Code: [ Select ]
.bottom { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 300px; }
.top { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
  1. .bottom { position: absolute; bottom: 0px; left: 0px; width: 100%; height: 300px; }
  2. .top { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }


So the html part:

Code: [ Select ]
<div class="bottom">
    <img src="../i/dark/ShellFooter.gif" width="100%" height="100%">
    <div class="top">
       [now the content]
    </div>
</div>
  1. <div class="bottom">
  2.     <img src="../i/dark/ShellFooter.gif" width="100%" height="100%">
  3.     <div class="top">
  4.        [now the content]
  5.     </div>
  6. </div>


Because of the absolute positioning of "top", it will exactly overlap the scaled image in the bottom.

If you want to scale the height of the image (to keep it's proportions) you will need to get the window size initially and do some DOM routines to create all this.
  • UPSGuy
  • Lurker ಠ_ಠ
  • Web Master
  • User avatar
  • Posts: 2733
  • Loc: Nashville, TN

Post 3+ Months Ago

*sigh* I'm always an afterthought at 1920. :D Same theory would apply, though. I'm used to seeing SOME space just because that's how people do it, but I wouldn't target 1200 specifically.
  • mk27
  • Proficient
  • Proficient
  • User avatar
  • Posts: 334

Post 3+ Months Ago

UPSGuy wrote:
*sigh* I'm always an afterthought at 1920. :D Same theory would apply, though. I'm used to seeing SOME space just because that's how people do it, but I wouldn't target 1200 specifically.


No, I agree too! I love my hi res 19" WIDESCREEN (1680 width).

It almost hurts my feelings when I hear that some people actually use their browser with only part of the desktop!

But that is reality. Go check your laptop. Chances are the web browser window is like 1000-1100px. To me, the point is you either want to be lazy and stubborn and run home with your ball when the world goes wrong, or you grit your teeth and learn how to code. :roll: People will not resize their browser or buy a new monitor to make your page look good -- you have to make it work in a dynamic, versatile way.
  • jammer2552
  • Graduate
  • Graduate
  • User avatar
  • Posts: 139

Post 3+ Months Ago

Haha, I think graphixboy is the only one who understands what I am doing.

I do not expect the entire 1200px wide graphic to be displayed. That is why I am struggling to maintain it's center position regardless of the browser width. I chose 1200px because I've started using site widths of 1000px since 800x600 resolutions are (thankfully) mostly a thing of the past, and 1024x768 is the new low resolution. 100px on each side of my graphic are enough to show the effect I desire no matter the screen size.

In answer to your response graphixboy, yes, the footer is in a wrapper (#ShellContainer) that keeps the site centered.
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1828
  • Loc: In the Great White North

Post 3+ Months Ago

ok so you will need to pull your footer out of that wrapper and place it below the rest of your content. That will allow your footer to fill the width of the page. Then place your image as the background of that div and center it with css. Any content should go inside another div so (footer -> div -> content) thats setup the same way as your body content to center within the dynamically sized footer.
  • jammer2552
  • Graduate
  • Graduate
  • User avatar
  • Posts: 139

Post 3+ Months Ago

I took the footer out of the wrapper, but nothing changed.

Then on my own whim, I set position:absolute; and width:100%.

And now it works :)

Thanks for helping me along!
  • Veeramanikandan
  • Novice
  • Novice
  • Veeramanikandan
  • Posts: 25

Post 39 days ago

use the css code like this

Code: [ Select ]
.ShellFooter{width: 100%;}
.ShellContent{width: 75%;
background: url("images.jpg");
margin: 0 auto;}
  1. .ShellFooter{width: 100%;}
  2. .ShellContent{width: 75%;
  3. background: url("images.jpg");
  4. margin: 0 auto;}


HTML Code: [ Select ]
<div class="Shellfooter">
      <div class="Shellcontent">
      </div>
</div>
 
  1. <div class="Shellfooter">
  2.       <div class="Shellcontent">
  3.       </div>
  4. </div>
  5.  


If you want adjust the Shellcontent width size.

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 39 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.