Results 1 to 8 of 8

Thread: 2 Body Background Images?

  1. #1
    Join Date
    Apr 2008
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question 2 Body Background Images?

    Is it possible to have two background images? One to the left, and one to the right of the window?

    Here's the code I tried in my CSS stylesheet, but it only showed one of the images.

    body
    {
    background: #C3E2A6 url(/images/flowerLEFT.jpg) 0% 0 no-repeat;
    background: #C3E2A6 url(/images/flowerRIGHT.jpg) 100% 0 no-repeat;
    }

    And here is a dummy mock up of what I'm trying to achieve.




  2. #2
    Join Date
    Nov 2006
    Location
    Northeast USA
    Posts
    408
    Thanks
    8
    Thanked 30 Times in 28 Posts

    Default

    Try this:
    Code:
    <html>
    <head>
    <style>
    body 
    {
    background: #C3E2A6 url(/images/flowerLEFT.jpg) top left no-repeat;
    }
    .right {
    width: 100%;
    height: 100px;
    background: #C3E2A6 url(/images/flowerRIGHT.jpg) top right 0 no-repeat;
    }
    </style>
    <title>Your Title</title>
    </head>
    <body>
    <div class="right"></div>
    other content
    </body>
    </html>
    You can tweak the height of .right. And you can include text inside of it also.
    -Ben -- THE DYNAMIC DRIVERS
    My Links: My DD Profile||My Youtube Video Tutorials||DD Helping Coders||DD Coders In Training
    I told my client to press F5, the client pressed F, then 5, *facepalm*

  3. #3
    Join Date
    Apr 2008
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the reply, but it didn't quite work. The closest I could get it to work was this following code in my CSS style sheet.

    body
    {
    background: #C3E2A6 url(/images/flowerLEFT.jpg) 0% 0 no-repeat;
    }

    .right {
    width: 300px;
    height: 430px;
    background: url(/images/flowerRIGHT.jpg);
    float: right;
    }

    The problem is the content for the rest of the page gets messed up. See example page: EXAMPLE
    (I know it's ugly, it's only an example.) All the elements are supposed to be centered, (not left) and the background color of my link (WORDS) is gone.


    Last edited by JackJack; 05-27-2008 at 08:00 PM.

  4. #4
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    All the elements are supposed to be centered, (not left)
    try
    Code:
    body {
         margin: 0 auto;
         width: 80%; /* 80% of the available viewport */
         text-align: center;
    }
    an interesting trick i learned about assigning 2 background images is to actually assign 1 to the body and 1 to html

    Code:
    html {
         background: #hexadecimal url('/path') no-repeat top left;
    }
    body {
         background: #hexadecimal url('/path') no-repeat top right;
    }
    now as for your anchor tags (links) being a different color, those are all controlled by

    a:link
    a:visited
    a:hover
    a:active

    so if you have multiple declarations of one or more, of those above, the one declared last should always be the one that is applied

  5. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,920
    Thanks
    2
    Thanked 267 Times in 262 Posts

    Default

    Hi there JackJack,

    you can see an example of two background-images here...

    ...and the code here...
    Code:
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>two backgrounds</title>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    
    html {
        height:100%;
        margin:0;
        padding:0;
        background-color:#fff;
        background-image:url(images/anim2.gif);
        background-repeat:repeat-y; 
        background-position:right top;
        background-attachment:fixed;
     }
    body {
        min-height:100%;
        margin:0;
        padding:0;
        background-image:url(images/anim1.gif);
        background-repeat:repeat-y; 
        background-position:left top;
        background-attachment:fixed;
     }
    div{
        margin:0 100px; 
        padding:140px 150px;
     }
    p{
        margin:0;
        padding:10px 0;
        text-align:justify;
     }
    </style>
    
    <!--[if IE 6]>
    <style type="text/css">
    body {
        height:100%;
     }
    </style>
    <![endif]-->
    
    </head>
    <body>
    
    <div>
    
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p><p>
    Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
    orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
    augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
    interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
    lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
    lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
    Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
    volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
    Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
    metus urna, semper eget, aliquam ac, feugiat nec, massa.
    </p><p>
    Nullam pharetra quam quis metus. Proin feugiat lacinia mauris. Cum sociis natoque 
    penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent faucibus erat 
    quis ante. Suspendisse eu tellus. Donec sit amet ante in nisl dapibus condimentum. Proin 
    diam. Curabitur egestas felis iaculis lorem. Aliquam sit amet risus ut nulla sollicitudin 
    scelerisque. Mauris viverra hendrerit augue. Morbi eu sapien sed enim rutrum blandit. 
    Quisque feugiat. Pellentesque luctus sagittis est. Donec dolor sem, bibendum ac, porta in, 
    rutrum sit amet, dui. Ut libero turpis, tempus nec, venenatis at, tincidunt ac, sem.
    </p><p>
    Cras dictum semper ante. Vivamus fermentum, neque non commodo congue, lacus lectus 
    elementum elit, vitae placerat nisl nibh vitae tortor. In molestie fermentum tellus. Nunc 
    dolor quam, venenatis vel, gravida sit amet, imperdiet sit amet, mi. Nulla facilisi. Nunc 
    pede orci, elementum eget, facilisis id, viverra vel, leo. Duis eu mauris eget felis 
    lobortis iaculis. Etiam elit metus, posuere ut, tempor eget, commodo eget, leo. Vivamus 
    elementum. Quisque fringilla orci sit amet nulla.
    </p><p>
    Praesent ut magna ut nibh porttitor vestibulum. Donec ac mauris sit amet elit egestas 
    condimentum. Duis varius euismod orci. Proin sapien turpis, posuere vitae, tincidunt at, 
    iaculis mattis, magna. Proin rutrum euismod metus. Maecenas ut ante. Pellentesque tincidunt. 
    Quisque nibh mauris, luctus eu, elementum in, convallis at, ante. Cras vehicula augue vitae 
    nibh. Suspendisse ut metus. Cras sit amet neque. Morbi fringilla metus in est. Vivamus 
    eleifend, nunc sit amet faucibus lacinia, ligula massa fringilla tellus, id pulvinar pede 
    enim posuere sem. Praesent sodales sem et neque. Suspendisse pellentesque. Nam non justo sit 
    amet turpis imperdiet sodales. Donec libero nisl, porta id, laoreet faucibus, sodales in, 
    nulla. Aenean molestie, urna sit amet hendrerit sollicitudin, diam lorem rhoncus ipsum, a 
    euismod pede mi quis sapien. Integer gravida porta eros. Nunc ultrices eros non nisi.
    </p>
    </div>
    
    </body>
    </html>
    
    
    coothead

  6. The Following User Says Thank You to coothead For This Useful Post:

    JackJack (05-27-2008)

  7. #6
    Join Date
    Feb 2008
    Posts
    63
    Thanks
    2
    Thanked 8 Times in 8 Posts

    Default

    boogyman - this will come in handy in the future.. you rock!!

  8. #7
    Join Date
    Apr 2008
    Posts
    22
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Smile Thanks

    Thanks for the help.

    I couldn't get it to work on IE, and after much trail and error I figured that the DOCTYPE is pretty darn important on IE. Also, I found that the DOCTYPE will not be included in a php include header script! So, I had to add that DOCTYPE to each page to get it to work.

    Stupid Internet Explorer!


  9. #8
    Join Date
    Jul 2006
    Location
    just north of Boston, MA
    Posts
    1,806
    Thanks
    13
    Thanked 72 Times in 72 Posts

    Default

    Quote Originally Posted by JackJack View Post
    I figured that the DOCTYPE is pretty darn important
    its only important if you wish to abide by the standards designed to help the site render the same across all browsers

    now as for Internet Explorer goes... all I can muster up is LMAO... even when IE is in standards mode, it does a bad job rendering properly

    Also, I found that the DOCTYPE will not be included in a php include header script! So, I had to add that DOCTYPE to each page to get it to work.
    if you had a page with all of your generic header information and then included it, whatever you have in that file should be transferred

    Stupid Internet Explorer!
    best three words of this thread! haha

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
  •