Add a background image to a div

Discussion in 'HTML' started by Cristian, Nov 4, 2007.

  1. Cristian

    Cristian Guest

    Hello!

    I have an image in a DIV#logo that is contained within a DIV.

    <BODY>
    <DIV ID="container">

    <DIV ID="logo">
    <IMG SRC="url">
    </DIV>

    <-- other DIVs and content here -->

    </DIV>
    <BODY>

    I want to set an image background to the DIV#logo. This is the code I
    am using:

    div#logo {
    background: url(url.jpg) red;
    }

    But the background image won't show up. I can see the red background
    color. I've taken the image in the HTML away, I've added padding to
    DIV#logo to see if the background image appears, but nothing happens.

    I hope someone can help me.

    Thanks in advance!
     
    Cristian, Nov 4, 2007
    #1
    1. Advertising

  2. Gazing into my crystal ball I observed Cristian <>
    writing in news::

    > Hello!
    >
    > I have an image in a DIV#logo that is contained within a DIV.
    >
    ><BODY>
    > <DIV ID="container">
    >
    > <DIV ID="logo">
    > <IMG SRC="url">
    > </DIV>
    >
    ><-- other DIVs and content here -->
    >
    > </DIV>
    ><BODY>
    >
    > I want to set an image background to the DIV#logo. This is the code I
    > am using:
    >
    > div#logo {
    > background: url(url.jpg) red;
    > }
    >
    > But the background image won't show up. I can see the red background
    > color. I've taken the image in the HTML away, I've added padding to
    > DIV#logo to see if the background image appears, but nothing happens.
    >
    > I hope someone can help me.
    >
    > Thanks in advance!
    >
    >


    Is url.jpg a real image? A URL would be helpful.

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
     
    Adrienne Boswell, Nov 4, 2007
    #2
    1. Advertising

  3. Cristian

    Cristian Guest

    On 3 nov, 18:58, Adrienne Boswell <> wrote:
    > Gazing into my crystal ball I observed Cristian <>
    > writing innews::
    >
    >
    >
    > > Hello!

    >
    > > I have an image in a DIV#logo that is contained within a DIV.

    >
    > ><BODY>
    > > <DIV ID="container">

    >
    > > <DIV ID="logo">
    > > <IMG SRC="url">
    > > </DIV>

    >
    > ><-- other DIVs and content here -->

    >
    > > </DIV>
    > ><BODY>

    >
    > > I want to set an image background to the DIV#logo. This is the code I
    > > am using:

    >
    > > div#logo {
    > > background: url(url.jpg) red;
    > > }

    >
    > > But the background image won't show up. I can see the red background
    > > color. I've taken the image in the HTML away, I've added padding to
    > > DIV#logo to see if the background image appears, but nothing happens.

    >
    > > I hope someone can help me.

    >
    > > Thanks in advance!

    >
    > Is url.jpg a real image? A URL would be helpful.
    >
    > --
    > Adrienne Boswell at Home
    > Arbpen Web Site Design Serviceshttp://www.cavalcade-of-coding.info
    > Please respond to the group so others can share



    It's a relative URL,

    div#logo {
    background: url(data/img/corners.jpg);

    }

    Does it make any difference?
     
    Cristian, Nov 4, 2007
    #3
  4. Cristian

    rf Guest

    "Cristian" <> wrote in message
    news:...
    > On 3 nov, 18:58, Adrienne Boswell <> wrote:
    >> Gazing into my crystal ball I observed Cristian <>
    >> writing innews::


    >> > I have an image in a DIV#logo that is contained within a DIV.


    > It's a relative URL,
    >
    > div#logo {
    > background: url(data/img/corners.jpg);


    One more little bit of information. If you had provided a URL up front the
    problem would have been instantly identifiable.

    > Does it make any difference?


    a huge difference.

    Let's *assume* you are using to an external CSS file, at some relative
    location: cssfiles/file.css.

    A background image specified inside that CSS file is relative to the
    location of the CSS file, not that of the site. So your "relative" location
    would in fact be:

    cssfiles/data/img/corners.jpg.

    Is my guesswork correct? :)

    --
    Richard.
     
    rf, Nov 4, 2007
    #4
  5. Cristian

    Cristian Guest

    On 3 nov, 21:16, richard <> wrote:
    > On Sun, 04 Nov 2007 00:08:59 -0000, Cristian wrote:
    > > Hello!

    >
    > > I have an image in a DIV#logo that is contained within a DIV.

    >
    > > <BODY>
    > > <DIV ID="container">

    >
    > > <DIV ID="logo">
    > > <IMG SRC="url">
    > > </DIV>

    >
    > > <-- other DIVs and content here -->

    >
    > > </DIV>
    > > <BODY>

    >
    > > I want to set an image background to the DIV#logo. This is the code I
    > > am using:

    >
    > > div#logo {
    > > background: url(url.jpg) red;
    > > }

    >
    > > But the background image won't show up. I can see the red background
    > > color. I've taken the image in the HTML away, I've added padding to
    > > DIV#logo to see if the background image appears, but nothing happens.

    >
    > > I hope someone can help me.

    >
    > > Thanks in advance!

    >
    > http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image
    >
    > Something simple you failed to recall from the instructions.
    > We have all been there done that so don't worry about it.


    I added the ' to the URL (I usually don't forget to add it), but it
    didn't cause any effect. After that, I added an internal css like
    this:

    <style type="text/css">
    div#logo
    {
    background-image:
    url('dat/img/corners.jpg');

    }
    </style>

    And it Worked!
    Now, my question is, Why the external css did not work, but the
    internal did? they do the same.

    EXTERNAL

    div#logo {
    background-image: url('dat/img/corners.jpg') red;
    }

    INTERNAL

    <style type="text/css">
    div#logo
    {
    background-image:
    url('dat/img/corners.jpg');

    }
    </style>
     
    Cristian, Nov 4, 2007
    #5
  6. Cristian

    Cristian Guest

    On 3 nov, 19:39, "rf" <> wrote:
    > "Cristian" <> wrote in message
    >
    > news:...
    >
    > > On 3 nov, 18:58, Adrienne Boswell <> wrote:
    > >> Gazing into my crystal ball I observed Cristian <>
    > >> writing innews::
    > >> > I have an image in a DIV#logo that is contained within a DIV.

    > > It's a relative URL,

    >
    > > div#logo {
    > > background: url(data/img/corners.jpg);

    >
    > One more little bit of information. If you had provided a URL up front the
    > problem would have been instantly identifiable.
    >
    > > Does it make any difference?

    >
    > a huge difference.
    >
    > Let's *assume* you are using to an external CSS file, at some relative
    > location: cssfiles/file.css.
    >
    > A background image specified inside that CSS file is relative to the
    > location of the CSS file, not that of the site. So your "relative" location
    > would in fact be:
    >
    > cssfiles/data/img/corners.jpg.
    >
    > Is my guesswork correct? :)
    >
    > --
    > Richard.


    Sure is!
    I thought it had to be relative to the HTML file. The Link was not so
    relative after all :)
    Bye and Thanks everyone!
     
    Cristian, Nov 4, 2007
    #6
  7. Cristian wrote:
    > On 3 nov, 21:16, richard <> wrote:
    >> On Sun, 04 Nov 2007 00:08:59 -0000, Cristian wrote:
    >>> Hello!
    >>> I have an image in a DIV#logo that is contained within a DIV.
    >>> <BODY>
    >>> <DIV ID="container">
    >>> <DIV ID="logo">
    >>> <IMG SRC="url">
    >>> </DIV>
    >>> <-- other DIVs and content here -->
    >>> </DIV>
    >>> <BODY>
    >>> I want to set an image background to the DIV#logo. This is the code I
    >>> am using:
    >>> div#logo {
    >>> background: url(url.jpg) red;
    >>> }
    >>> But the background image won't show up. I can see the red background
    >>> color. I've taken the image in the HTML away, I've added padding to
    >>> DIV#logo to see if the background image appears, but nothing happens.
    >>> I hope someone can help me.
    >>> Thanks in advance!

    >> http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image
    >>
    >> Something simple you failed to recall from the instructions.
    >> We have all been there done that so don't worry about it.

    >
    > I added the ' to the URL (I usually don't forget to add it), but it
    > didn't cause any effect. After that, I added an internal css like
    > this:


    Because quotes are not required unless there are embedded spaces in the URL.

    >
    > <style type="text/css">
    > div#logo
    > {
    > background-image:
    > url('dat/img/corners.jpg');
    >
    > }
    > </style>
    >
    > And it Worked!
    > Now, my question is, Why the external css did not work, but the
    > internal did? they do the same.
    >
    > EXTERNAL
    >
    > div#logo {
    > background-image: url('dat/img/corners.jpg') red;
    > }
    >
    > INTERNAL
    >
    > <style type="text/css">
    > div#logo
    > {
    > background-image:
    > url('dat/img/corners.jpg');
    >
    > }
    > </style>
    >


    Because I bet your external stylesheet is *not* in the same folder as
    your document. As rf (Richard) correctly suggested the relative path in
    the stylesheet for the image will be relative to the stylesheet's
    location not the document. It would be easy to diagnose if you provided
    a URL to your page. But since you didn't I will speculate that your
    page at:
    www.example.com/troubled.html

    And the image is at:
    www.example.com/dat/img/corners.jpg

    And the stylesheet:
    www.example.com/somefolder/stylesheet.css

    If the 'stylesheet.css' has:

    background-image: url(dat/img/corners.jpg);

    Then that would translate:

    www.example.com/somefolder/dat/img/corners.jpg

    And that would fail. But if you paste the code into your page in a STYLE
    element then it would be relative from the page and translate:

    www.example.com/dat/img/corners.jpg

    And it would work.

    If you want it work in the *external* worksheet use the image url
    relative to your document root. For my speculative example:

    background-image: url(/dat/img/corners.jpg);
    ^
    NOTE the leading '/' in the URL.


    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Nov 4, 2007
    #7
  8. richard wrote:
    > On Sun, 04 Nov 2007 00:58:51 GMT, Adrienne Boswell wrote:


    >>>

    >> Is url.jpg a real image? A URL would be helpful.

    >
    > Why? Can't you supply your own image and a bit of similar coding locally?
    > Now I'll just bet that you were at this stage once and had the similar
    > problems right? Or did you become an expert without reading the manual?


    Because your quote suggestion is incorrect, and the most probable cause
    is a relative path problem that a URL to the page in question would be
    easy to diagnose.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Nov 4, 2007
    #8
  9. On Sun, 04 Nov 2007 01:46:29 -0000, in alt.html Cristian
    <> wrote:

    >Now, my question is, Why the external css did not work, but the
    >internal did? they do the same.
    >
    >EXTERNAL
    >
    >div#logo {
    > background-image: url('dat/img/corners.jpg') red;
    >}
    >
    >INTERNAL
    >
    ><style type="text/css">
    >div#logo
    >{
    >background-image:
    >url('dat/img/corners.jpg');
    >
    >}
    ></style>


    Instead of 'background-image', try just 'background':

    ..marines {color: #660000; background: #acb78e
    url(bg-marines.gif); border-color: #ff0033}

    translation: dark rust red, swamp green/digital camouflage, medium red
    --
    William Hughes, San Antonio, Texas:
    The Carrier Project: http://home.grandecom.net/~cvproj/carrier.htm
    Support Project Valour-IT: http://soldiersangels.org/valour/index.html
     
    William Hughes, Nov 4, 2007
    #9
  10. William Hughes wrote:

    > Instead of 'background-image', try just 'background':
    >
    > .marines {color: #660000; background: #acb78e
    > url(bg-marines.gif); border-color: #ff0033}
    >
    > translation: dark rust red, swamp green/digital camouflage, medium red


    'background' is just a shortcut for all the properties
    'background-color' + 'background-image' + 'background-position' ...

    but that is not what his problem is here.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Nov 4, 2007
    #10
  11. Cristian

    richard Guest

    On Sun, 04 Nov 2007 00:58:51 GMT, Adrienne Boswell wrote:

    > Gazing into my crystal ball I observed Cristian <>
    > writing in news::
    >
    >> Hello!
    >>
    >> I have an image in a DIV#logo that is contained within a DIV.
    >>
    >><BODY>
    >> <DIV ID="container">
    >>
    >> <DIV ID="logo">
    >> <IMG SRC="url">
    >> </DIV>
    >>
    >><-- other DIVs and content here -->
    >>
    >> </DIV>
    >><BODY>
    >>
    >> I want to set an image background to the DIV#logo. This is the code I
    >> am using:
    >>
    >> div#logo {
    >> background: url(url.jpg) red;
    >> }
    >>
    >> But the background image won't show up. I can see the red background
    >> color. I've taken the image in the HTML away, I've added padding to
    >> DIV#logo to see if the background image appears, but nothing happens.
    >>
    >> I hope someone can help me.
    >>
    >> Thanks in advance!
    >>
    >>

    >
    > Is url.jpg a real image? A URL would be helpful.


    Why? Can't you supply your own image and a bit of similar coding locally?
    Now I'll just bet that you were at this stage once and had the similar
    problems right? Or did you become an expert without reading the manual?
     
    richard, Nov 4, 2007
    #11
  12. Cristian

    richard Guest

    On Sun, 04 Nov 2007 00:08:59 -0000, Cristian wrote:

    > Hello!
    >
    > I have an image in a DIV#logo that is contained within a DIV.
    >
    > <BODY>
    > <DIV ID="container">
    >
    > <DIV ID="logo">
    > <IMG SRC="url">
    > </DIV>
    >
    > <-- other DIVs and content here -->
    >
    > </DIV>
    > <BODY>
    >
    > I want to set an image background to the DIV#logo. This is the code I
    > am using:
    >
    > div#logo {
    > background: url(url.jpg) red;
    > }
    >
    > But the background image won't show up. I can see the red background
    > color. I've taken the image in the HTML away, I've added padding to
    > DIV#logo to see if the background image appears, but nothing happens.
    >
    > I hope someone can help me.
    >
    > Thanks in advance!


    http://www.w3schools.com/css/tryit.asp?filename=trycss_background-image

    Something simple you failed to recall from the instructions.
    We have all been there done that so don't worry about it.
     
    richard, Nov 4, 2007
    #12
  13. Cristian

    Bone Ur Guest

    Well bust mah britches and call me cheeky, on Sun, 04 Nov 2007 03:09:32 GMT
    richard scribed:

    >> Is url.jpg a real image? A URL would be helpful.


    > Why? Can't you supply your own image and a bit of similar coding locally?


    I can't believe you said that but my new tolerance policy prevents me from
    elaborating on idiotic statements.

    > Now I'll just bet that you were at this stage once and had the similar
    > problems right?


    I was once a beginner but my worst problem was picking my nose and eating
    it.

    > Or did you become an expert without reading the manual?


    Actually, yes, I did. Why, are you still struggling _with_ the manual?

    --
    Bone Ur
    Cavemen have formidable pheromones.
     
    Bone Ur, Nov 4, 2007
    #13
  14. Cristian

    rf Guest

    "Bone Ur" <> wrote in message
    news:Xns99DDD5EB39D16boneurhyphe@85.214.62.108...
    > Well bust mah britches and call me cheeky, on Sun, 04 Nov 2007 03:09:32
    > GMT
    > richard scribed:
    >
    >>> Is url.jpg a real image? A URL would be helpful.

    >
    >> Why? Can't you supply your own image and a bit of similar coding locally?

    >
    > I can't believe you said that but my new tolerance policy prevents me from
    > elaborating on idiotic statements.


    And, as has been proven, this would have achieved nothing at all. Adrienne
    would have got it right, not knowing the information the OP did not provide.

    <snip nit picking> :)

    --
    Richard.
     
    rf, Nov 4, 2007
    #14
  15. Cristian

    Bone Ur Guest

    Well bust mah britches and call me cheeky, on Sun, 04 Nov 2007 05:52:55
    GMT rf scribed:

    >>>> Is url.jpg a real image? A URL would be helpful.

    >>
    >>> Why? Can't you supply your own image and a bit of similar coding
    >>> locally?

    >>
    >> I can't believe you said that but my new tolerance policy prevents me
    >> from elaborating on idiotic statements.

    >
    > And, as has been proven, this would have achieved nothing at all.
    > Adrienne would have got it right, not knowing the information the OP
    > did not provide.


    Yep, without question. That's why a url is so important, but what got me
    is that the replier implies people should respond using their own time and
    resources to compensate for laziness or clueless behavior. Not this
    wombat!

    > <snip nit picking> :)
    >


    --
    Bone Ur

    When I was a young man I learned that having sex with a woman is fun until
    you either get caught or married.
     
    Bone Ur, Nov 4, 2007
    #15
  16. Cristian

    rf Guest

    "Bone Ur" <> wrote in message
    news:Xns99DE17D2FB8CBboneurhyphe@85.214.62.108...
    > Well bust mah britches and call me cheeky, on Sun, 04 Nov 2007 05:52:55
    > GMT rf scribed:
    >
    >>>>> Is url.jpg a real image? A URL would be helpful.
    >>>
    >>>> Why? Can't you supply your own image and a bit of similar coding
    >>>> locally?
    >>>
    >>> I can't believe you said that but my new tolerance policy prevents me
    >>> from elaborating on idiotic statements.

    >>
    >> And, as has been proven, this would have achieved nothing at all.
    >> Adrienne would have got it right, not knowing the information the OP
    >> did not provide.

    >
    > Yep, without question. That's why a url is so important, but what got me
    > is that the replier implies people should respond using their own time and
    > resources to compensate for laziness or clueless behavior. Not this
    > wombat!


    Let me introduce you to the other "Richard". If it is whom I think it is
    then you are in for some interesting times :)

    --
    Richard.
     
    rf, Nov 4, 2007
    #16
  17. On Sat, 03 Nov 2007 23:01:37 -0400, in alt.html "Jonathan N. Little"
    <> wrote:

    >William Hughes wrote:
    >
    >> Instead of 'background-image', try just 'background':
    >>
    >> .marines {color: #660000; background: #acb78e
    >> url(bg-marines.gif); border-color: #ff0033}
    >>
    >> translation: dark rust red, swamp green/digital camouflage, medium red

    >
    >'background' is just a shortcut for all the properties
    >'background-color' + 'background-image' + 'background-position' ...


    Exactly. My point was that it might be too specific.

    >but that is not what his problem is here.


    If you say so... :)
    --
    Support Project Valour-IT: http://soldiersangels.org/valour/index.html
     
    William Hughes, Nov 4, 2007
    #17
  18. William Hughes wrote:
    > On Sat, 03 Nov 2007 23:01:37 -0400, in alt.html "Jonathan N. Little"
    > <> wrote:
    >
    >> William Hughes wrote:
    >>
    >>> Instead of 'background-image', try just 'background':
    >>>
    >>> .marines {color: #660000; background: #acb78e
    >>> url(bg-marines.gif); border-color: #ff0033}
    >>>
    >>> translation: dark rust red, swamp green/digital camouflage, medium red

    >> 'background' is just a shortcut for all the properties
    >> 'background-color' + 'background-image' + 'background-position' ...

    >
    > Exactly. My point was that it might be too specific.
    >
    >> but that is not what his problem is here.

    >
    > If you say so... :)


    It wasn't. If you are specifying a background image and it doesn't
    display just changing the property from 'background-image' to
    'background' will *not* solve the problem. So, no your suggestion wan
    not a possible solution for the OP.

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Nov 4, 2007
    #18
  19. Cristian

    Bone Ur Guest

    Well bust mah britches and call me cheeky, on Sun, 04 Nov 2007 10:19:37
    GMT rf scribed:

    >> Yep, without question. That's why a url is so important, but what
    >> got me is that the replier implies people should respond using their
    >> own time and resources to compensate for laziness or clueless
    >> behavior. Not this wombat!

    >
    > Let me introduce you to the other "Richard". If it is whom I think it
    > is then you are in for some interesting times :)


    Oh oh. Yes, I have had trouble with various "Richard"s in the past, but
    fortunately, other even more irascible varmints have come along in a timely
    manner to help redirect my sticky dickish conundrums. Just goes to show
    ya, people as a whole are beneficial even when they might be acting like
    clueless babes in the woods. :)

    --
    Bone Ur

    When I was a young man I learned that having sex with a woman is fun until
    you either get caught or married.
     
    Bone Ur, Nov 4, 2007
    #19
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. jc
    Replies:
    3
    Views:
    1,787
  2. jc
    Replies:
    1
    Views:
    1,410
    Neredbojias
    Mar 19, 2008
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    809
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    239
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    359
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page