Add a background image to a div

C

Cristian

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!
 
A

Adrienne Boswell

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!
Click to expand...

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

rf

It's a relative URL,

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

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?
Click to expand...

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? :)
 
C

Cristian

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.
Click to expand...

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

Cristian

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


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? :)
Click to expand...

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!
 
J

Jonathan N. Little

Cristian said:
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:
Click to expand...

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>
Click to expand...

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

Jonathan N. Little

richard said:
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?
Click to expand...

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

William Hughes

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>
Click to expand...

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
 
J

Jonathan N. Little

William said:
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
Click to expand...

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

but that is not what his problem is here.
 
R

richard

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

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?
 
R

richard

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!
Click to expand...

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

Bone Ur

Well bust mah britches and call me cheeky, on Sun, 04 Nov 2007 03:09:32 GMT
richard scribed:
Why? Can't you supply your own image and a bit of similar coding locally?
Click to expand...

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?
Click to expand...

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?
Click to expand...

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

rf

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



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

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> :)
 
B

Bone Ur

Well bust mah britches and call me cheeky, on Sun, 04 Nov 2007 05:52:55
GMT rf scribed:
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.
Click to expand...

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!
 
R

rf

Bone Ur said:
Well bust mah britches and call me cheeky, on Sun, 04 Nov 2007 05:52:55
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!
Click to expand...

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

William Hughes

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

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

If you say so... :)
 
J

Jonathan N. Little

William said:
Exactly. My point was that it might be too specific.


If you say so... :)
Click to expand...

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

Bone Ur

Well bust mah britches and call me cheeky, on Sun, 04 Nov 2007 10:19:37
GMT rf scribed:
Let me introduce you to the other "Richard". If it is whom I think it
is then you are in for some interesting times :)
Click to expand...

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

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Background image not showing up on html page 3
Animate a background image 0
How can I get my menu inside of a menu to function properly? 1
Clickable Div Block 1
I am trying to detect Which image id="" was clicked ? 22
How to make a div select work? 5
How can I add arrows to my FAQ 0
Image shifts to the right when export the page to pdf 4

Members online

Total: 24 (members: 1, guests: 23)
Robots: 444

Forum statistics

Threads
473,767
Messages
2,569,572
Members
45,046
Latest member
Gavizuho

Latest Threads

Top