SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2011
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Background Image Question

    I want to have a "black" background, w/ a "white" foreground. I have used this code:
    HTML Code:
    	body { background-color: #000000; background-image:url('white.jpg'); 
    			background-repeat:repeat-y; background-position:center}
    Now my question is: How do I control the width of the image and also, w/o being forced to use a "center" tag for all text, how do I ensure that all text remains w/in the confines of the image?

  2. #2
    SitePoint Enthusiast Matt G.'s Avatar
    Join Date
    May 2011
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    By image you mean the background-image? right?
    You cannot control the image's width by css as far as I know because it is a background image. Unless you edit the image in a editor and then put it as no-repeat it will always be 100% width.

    as for the text, you can center it by using the following css code.
    Code:
    #yourdiv {
    text-align: center;
    }
    Hope this helps,
    Matt

  3. #3
    SitePoint Zealot
    Join Date
    Apr 2011
    Posts
    109
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So if I wanted to control a background image, I need to use inline code.. Would I call the image at the beginning of the body element before anything else? Or say if I had a left, center, right.. I would call the image when I would call my center?

  4. #4
    SitePoint Zealot
    Join Date
    Nov 2008
    Location
    Germany
    Posts
    119
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code CSS:
    html {
    background:#000000;
    }
     
    body{
    background:#FFFFFF url("white.jpg") repeat-y scroll 0 0;
    min-width: 500px;
    max-width: 500px;
    margin: 0 auto;
    }

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,339
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Moved to CSS Forum.

    I think you need to show an example of what you are trying to do so that we can give more specific answers

    If you are wanting to repeat a graphic down the centre of the page at a fixed width (say 760px) then to match the text in the page to that image you would need to create a container on the page that is 760px wide and has auto margins to centre it.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
        min-width:762px;
    }
    body {
        background:#000 url(white.jpg) repeat-y 50% 0;
    }
    #outer {
        width:760px;
        margin:auto;
        border:1px solid #fff;
        color:#fff;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <h1>Content goes here</h1>
    </div>
    </body>
    </html>
    You could set a width on the body to match the image but that throws up lost of bugs in older browsers so is best avoided for the time being.


Bookmarks

Posting Permissions

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