Jump to content

image in a div


gawain

Recommended Posts

Hallo everybody.This is my question: if I write an external CSS like this one body {background: #036 url('myimage.gif') fixed center no-repeat;} the image appears right in the middle of the page.If the same code is written inside a DIV, the image does not appears, unless I wirite a lot of <br> in the HTML, I mean: <div class="Myclass"><br><br>...</div>Is there any reason which can explain this?Is there any possibility to call aan image from CSS, or do I have to call it with the tag <img> from inside html?I've been searching in the forum, but with no answerThanks :)

Link to comment
Share on other sites

If the same code is written inside a DIV, the image does not appears, unless I wirite a lot of <br> in the HTML, I mean: <div class="Myclass"><br><br>...</div>Is there any reason which can explain this?
It doesn't appear because there is no dimension to the div, there can't be a background for zero dimension.If you give the div a height and width the image will then appear without using <br /><div style="width:100px;height:100px" class="Myclass"></div>
Link to comment
Share on other sites

Thanks Scott for replying :)

If you give the div a height and width the image will then appear without using <br /><div style="width:100px;height:100px" class="Myclass"></div>

I'm sorry, but I didn't tell: I gave the width and height (trying both with pixrl and %), but it didn't worked. Could it be 'cause I was usign an external css, while if I use <div style=""> everything is OK?Thanks again
Link to comment
Share on other sites

Thanks Scott for replying :) I'm sorry, but I didn't tell: I gave the width and height (trying both with pixrl and %), but it didn't worked. Could it be 'cause I was usign an external css, while if I use <div style=""> everything is OK?Thanks again

It does work, IE seems to be working correctly but FF it still treats it as the background image :) if you change the width and height to smaller values you'll see that it doesn't show in FF, weird...
<html><head><style type="text/css">div{ background: #00ff00 url('http://www.w3schools.com/css/smiley.gif') no-repeat fixed center; width:800px;height:800px; }</style></head><body><div>This is some text</div></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...