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 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    background image and text not minimizing

    Hey guys

    I'm new to this stuff. I'm trying to get my background (770x481) to be centered on my page. I've done things like background-position: center center; but it doesn't center it, half of the image isn't showing.

    I can do it using % but when I minimize my browser..I don't get a scroll bar. Also, the text doesn't move, so it's no consistent.

    All I want is a background image that's centered and with my content to stay consistent with the browser.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Got a link to your page?

  • #3
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Don't have one because it's not even up lol I just started making it and I've looked everywhere and tried everything. Can't get it to work.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Can you post your whole html and css then?

  • #5
    New to the CF scene
    Join Date
    Oct 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I got it centered, but when i minimize the window, the whole page gets smaller with the text staying the same lol (image moves to a different position but the text doesn't move)

    I noticed that when I take out the background-position: center center; everything is fine, but my image isnt centered and is on the top left lol. O my.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <link href="background.css" rel="stylesheet" type="text/css" />
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <link href="background.css" rel="stylesheet" type="text/css">
    
    </head>
    
    
    
    <body>
    </body>
    </html>



    CSS



    Code:
    body {
    	background-color: #000;
    	background-image: url(images/index_background.jpg);
    	background-repeat: no-repeat;
    	background-position: center center;
    	background-attachment: fixed;
    }
    Last edited by D13G0; 10-19-2010 at 07:13 PM.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Because you've got the background-image set on the body element, it's going to do exactly what you describe. The bakcground image is centred on the page regardless of how wide the page is, and the text is always to the top left.

    I'm guessing you really want the background image to be on a block of text, in which case you might want something like:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    
    <style type="text/css">
    #wrapper {
        background-color: #000;
        background-image: url(images/background.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        width:770px;/*set the div to have a width*/
        height:481px;/*and a height if you want*/
        margin:0 auto/*centre the div on the page*/
    }
    </style>
    </head>
    
    
    
    <body>
    <div id="wrapper">Some text</div>
    </body>
    </html>
    Then when you resize the page, the div, its text and its background move together.


  •  

    Posting Permissions

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