Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Add a background image to a div

Reply
Thread Tools

Add a background image to a div

 
 
Cristian
Guest
Posts: n/a
 
      11-04-2007
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!

 
Reply With Quote
 
 
 
 
Adrienne Boswell
Guest
Posts: n/a
 
      11-04-2007
Gazing into my crystal ball I observed Cristian <(E-Mail Removed)>
writing in news:(E-Mail Removed) ps.com:

> 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

 
Reply With Quote
 
 
 
 
Cristian
Guest
Posts: n/a
 
      11-04-2007
On 3 nov, 18:58, Adrienne Boswell <(E-Mail Removed)> wrote:
> Gazing into my crystal ball I observed Cristian <(E-Mail Removed)>
> writing innews:(E-Mail Removed) oups.com:
>
>
>
> > 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?

 
Reply With Quote
 
rf
Guest
Posts: n/a
 
      11-04-2007

"Cristian" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed) ups.com...
> On 3 nov, 18:58, Adrienne Boswell <(E-Mail Removed)> wrote:
>> Gazing into my crystal ball I observed Cristian <(E-Mail Removed)>
>> writing innews:(E-Mail Removed) oups.com:


>> > 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.




 
Reply With Quote
 
Cristian
Guest
Posts: n/a
 
      11-04-2007
On 3 nov, 21:16, richard <(E-Mail Removed)> 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.a...ckground-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>

 
Reply With Quote
 
Cristian
Guest
Posts: n/a
 
      11-04-2007
On 3 nov, 19:39, "rf" <(E-Mail Removed)> wrote:
> "Cristian" <(E-Mail Removed)> wrote in message
>
> news:(E-Mail Removed) ups.com...
>
> > On 3 nov, 18:58, Adrienne Boswell <(E-Mail Removed)> wrote:
> >> Gazing into my crystal ball I observed Cristian <(E-Mail Removed)>
> >> writing innews:(E-Mail Removed) oups.com:
> >> > 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!

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      11-04-2007
Cristian wrote:
> On 3 nov, 21:16, richard <(E-Mail Removed)> 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.a...ckground-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
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      11-04-2007
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
 
Reply With Quote
 
William Hughes
Guest
Posts: n/a
 
      11-04-2007
On Sun, 04 Nov 2007 01:46:29 -0000, in alt.html Cristian
<(E-Mail Removed)> 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: http://www.velocityreviews.com/forums/(E-Mail Removed)
The Carrier Project: http://home.grandecom.net/~cvproj/carrier.htm
Support Project Valour-IT: http://soldiersangels.org/valour/index.html
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      11-04-2007
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
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
DIV background-repeat background-image? For shadow effect jc ASP .Net 3 03-19-2008 04:19 PM
DIV background-repeat background-image for shadowing effect jc HTML 1 03-19-2008 02:16 PM
NS/FF don't change div offsetWidth when div innerHTML is added toand div becomes wider mscir Javascript 3 06-26-2005 04:04 PM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM



Advertisments