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 9 of 9
  1. #1
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts

    add background image to a DIV

    wanting to change the background of a DIV not the colour but have an image instead.

    is this possible? if so how?

    thanks

    Code:
    .container { position:relative; background:#799BD9; margin:0 5px;}
    .rtop, .rbottom{ display: block; background:#507BCD; }
    .rtop *, .rbottom *{ display: block; height: 1px; overflow: hidden; background:#799BD9; }
    .r1{ margin: 0 5px}
    .r2{ margin: 0 3px}
    .r3{ margin: 0 2px}
    .r4{ margin: 0 1px; height: 1px }
    h1 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 0; padding: 5; }
    a.two:link { color: #000; }
    a.two:visited { color: #000; }
    a.two:hover { color: #fff; }
    a.two:active { color: #000; }
    a.two { text-decoration: none; }
    Code:
    <div class="container">
    <b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
    <a class="two" href="?v=4047" target="_blank"><h1>oh..me.</h1></a>
    <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>
    Last edited by jasonc310771; 02-10-2008 at 04:10 PM.

  • #2
    New Coder
    Join Date
    Dec 2007
    Posts
    51
    Thanks
    1
    Thanked 1 Time in 1 Post
    The background of .container?

    Code:
    .container { position:relative; background:#799BD9; margin:0 5px;}
    change that to this:

    Code:
    .container { position:relative; background-image: url(image url or path); margin:0 5px;}

  • #3
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts
    ah yes that what i needed but just one thing how can i get the top and bottom parts to have the image too

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,797
    Thanks
    6
    Thanked 1,023 Times in 996 Posts
    Apply it to the top and bottom part as you did to the container…?

    Sonetimes the simple and obvious things actually are simple.

  • #5
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts
    yes i guessed that but this will mean the image is repeated somewhat.

    which is not what i was looking for.

    i am after an image that is in the background but to have the borders rounded to the rest of the containers

    not sure how to explain it

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,797
    Thanks
    6
    Thanked 1,023 Times in 996 Posts
    The best way to explain that is to show us something. A link to the page in question would be nice.

  • #7
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Put the top and bottom, without assigning a background-color or image to em (means they're transparent) in a new container and then apply the image to that container?

  • #8
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts
    here is a jpg of an example with an image that has rounded edges.
    Attached Thumbnails Attached Thumbnails add background image to a DIV-1.jpg  

  • #9
    Regular Coder
    Join Date
    Mar 2006
    Location
    Sumter, SC
    Posts
    178
    Thanks
    10
    Thanked 4 Times in 4 Posts
    add one of the following to your div tag containing the background image

    Code:
    background-repeat:no-repeat;  /* Non repeating bg */
    background-repeat:repeat-x;   /* Repeating bg on the X-Axis (Horizontal repeat) */
    background-repeat:repeat-y;   /* Repeating bg on the Y-Axis (Vertical repeat) */
    and if no background-repeat is specified it defaults to repeating on BOTH the X-Axis and Y-Axis


  •  

    Posting Permissions

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