Content & Background-Image

This site is best viewed in a modern browser with JavaScript enabled.

ecarter202

So I am simply trying to display an image in a div tag. CSS is external, and I know the image path is correct because it works using content: url('my_url'); but doesn't work using background-image: url('my_url');

Any suggestions?

Perhaps just use 'content'? However, I'd like to repeat it horizontally...

CSS

#banner {
content: url('my_url'); <!-- works!!!! -->
background-image: url('my_url'); <!-- doesn't work!!! -->
background-repeat: repeat-x;
position: absolute;
bottom: 0;
}

HTML

<div id="banner"></div>

Sup3rkirby

Just looking at this, I would have to guess that setting the background-image property doesn't seem to work because the <div> has no content, thus has no size. So there is a background, but the <div> itself is not really visible. Have you tried setting the width/height of the <div> as well when setting the background-image?

Alternatively, you could add   inside of the <div>. Since it's a block element it will fill the width of its parent, but with nothing inside it there is no height.

ecarter202

I just tried all of those suggestions, and the image is still not being displayed.

Content works again, but no luck with background-image.

ecarter202

I also added a style tag in the head tag with the same css code, and still not displaying... perhaps it's an issue with the CSS??

ecarter202

Okay, I got the image to display by adding the original height and width of the image to the css. Now how do I get the image to repeat horizontally??

Thank you thus far!!

ecarter202

Figured it out. If you set the height to the preferred height in the css, and the width to 100% [or particular width] in the css, it works. Simply didn't set the height or width property.

Thank you Sup3rkirby!