Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Background Image Being Pushed Left

    Whenever, I resize the browser to a shorter width than the banner, it pushes the background image off to the left of the screen. I've experimented with a lot of different css positioning values, but I keep managing to screw it up more. Here's my default code that centers everything just how I want. Could I get help with finding css values that will prevent the background image from being pushed off the screen in my #banner div?

    You can see an example of what I'm talking about here:

    http://www.kinkyintentions.com

    Code:
    body {
    	text-align: center;
    	background-color: #b2b2b2;
    }
    
    #banner {
    	background-repeat: no-repeat;
    	background-image: url(images/bannerbg.jpg);
    	background-position: center center;
    	padding: 1em;
    	height: 225;
    	width: 940;
    	top: 30px;
    }

  • #2
    Regular Coder mbaker's Avatar
    Join Date
    Jan 2010
    Location
    Burford, Oxfordshire, United Kingdom
    Posts
    249
    Thanks
    1
    Thanked 39 Times in 39 Posts
    Try for your #banner CSS:

    Code:
    #banner {
    	background-repeat: no-repeat;
    	background-image: url(images/bannerbg.jpg);
    	background-position: center center;
    	padding: 1em;
    	height: 225px;
    	width: 940px;
    	/* top: 30px; */
    	margin: 30px auto 0;
    	border:solid 1px red; /* for demo purposes only */
    }
    Unlike HTML, CSS requires units on all dimensions (except lengths of 0).

    With invalid height and width they will probably default to 0 and 100% respectively, but different browsers may behave in different ways when confronted with invalid CSS.

    Rather than top: 30px, you should probably use margin-top: 30px;

    margin: 30px auto 0; is shorthand for:

    margin-top: 30px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;

    Using margin-right: auto; and margin-left: auto; will centre your banner (except when your window is too narrow).

    It is always a good idea to check your CSS with the W3C validator (link below).
    Last edited by mbaker; 07-02-2010 at 04:09 PM. Reason: afterthought
    - Michael Baker - HTML Tags Guide - Reference and Tutorials
    - Like voting, validate early, validate often - W3C HTML Validator - W3C CSS Validator
    - Wot? me cynical? no, its just if you vote, er, validate early, you have more chance of validating often.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •