Question:

How do you apply a background to a div?

by  |  earlier

0 LIKES UnLike

my code doesnt work for some reason

anybody have anything they can show me to help?

 Tags:

   Report
Answer The Question I've Same Question Too

5 ANSWERS

Sort By: Date  |  Rating

  1. css way:

    if its div class use a dot in front if its a div id use the number sign in front of the div name

    ./#DIV NAME HERE {

    background-image: url('PASTE IMAGE URL HERE')

    }

    html way:

    <div style="background-image: url('PASTE IMAGE URL HERE')">CONTENTS HERE</div>


  2. For a non-tileable image that scrolls with page contents -

    Between the <head></head> tags:

    <style type="text/css">

    div#mybg {

    width: XXpx;

    height: YYpx;

    background: #fff url(path/image_name.png) no-repeat center scroll;

    }

    </style>

    After body tag -

    <div id="mybg"></div>

    Set width/height to image size. Change 'scroll' to fix if you want contents to scroll over div's bg image. Change #ff to bg color of choice.  Add margin: 0 auto; if you want div center within the container.

    Ron

  3. add my myspace layout site...

    i will help you..

    i dont know the code off hand but i do have divs (:

    so yea

    myspace.com/358649055

  4. Text background image:

    <DIV STYLE="background-image: URL(back.gif)">

    Today is fine. Today is fine.

    </DIV>

    Box background image:

    <DIV STYLE="position:relative; left:0; top:0;

    height:100; width:200; border-style:solid;

    background-image:url(back.gif);

    background-repeat:#">

    Today is fine. Today is fine.<BR>

    ...

    Today is fine. Today is fine.<BR>

    </DIV>

    Read more here:

    http://www.ncdesign.org/html/s030col.htm

    Hope this helps.

    Dan

  5. You probably already have

    background-color: #ff00ff;

    or

    background-image: url(url_to_image.jpg) top left repeat x;

    So if it's not showing, it may be because it's not CLEARING. That is, a div doesn't automatically wrap content. Put a border on it, like

    border: 1px solid #ff0000;

    And if you see a line like this

    --------------------------------------...

    This is my content, but the div is the line above!

    It's not wrapping the content. The solutions are to float it, and float content inside (a floated div will always shrink-wrap it's floated children), play with the overflow property (may cause other problems,) or add a CLEARING element in the very bottom of the div to force it to wrap the entire content.

    .clr { clear: both }

    #myDiv { background-color: #ff0000; }

    <div id="myDiv">

    <p>Content</p>

    <p>Content</p>

    <p>Content</p>

    <div class="clr"></div>

    </div>
You're reading: How do you apply a background to a div?

Question Stats

Latest activity: earlier.
This question has 5 answers.

BECOME A GUIDE

Share your knowledge and help people by answering questions.
Register Now