[SOLVED] using background images to fill div's

[R8515198]

I am trying to use CSS to fill in a div, using the backgoround image property.

Code: Select all

#banner {
 background-image: url(assets/images/banner.gif);
}

Code: Select all

#banner {
 background-image: url(assets/images/banner.gif);
 height: 100px;
 }

have tried the above even making the div the height of the image.


where am i going wrong.

any help will be grateful

Cheers
Dan

[Marc]

You will need a width (width of the image)

[Jack Franklin]

I'm presuming your problem is that the image is not appearing?

I think you have missed the background-position and background-repeat properties!

Code: Select all

#banner {
background-image: url(....banner.gif);
background-repeat: no-repeat;
background-position: top;
width: the width of your image or more;
}

You do need to also add a width to your div, it needs to be the same width as the div or greater, and the same with the height.

Good luck!

HtH!

Jack

[R8515198]

You beauti, It has work thanks for that, as per usually amazingly fast response.

Cheers

Dan

[Marc]

I dont think you need :

Code: Select all

background-repeat: no-repeat;
background-position: top;

IF you use the div the same width and height of the image. I think....

[Jack Franklin]

Actually I think you are right! So all you need is:

Code: Select all

background-image:
width: (must be equal to image or greater)
height: (must be equal to image or greater).

Actually, I'm not so sure. If I hadn't of been on dreamweaver for 6 hours today I might have been bothered to open it and check but I can't!
Saves some file space I spose

Jack

[Marc]

I think it has to be EQUAL to image or it might repeat. Only way to find out is to try it

[Jack Franklin]

If you set the width to greater than you will need the background-repeat then.

EDit - Ok, I tried.

If you set the width and height to be greater than your image, then you will need to use:

Code: Select all

background-repeat: no-repeat;

It will then default place your image in the top left of the containing div. To change this you need to add:

Code: Select all

background-position:

Remebering that the choices for background position are:
top right left center bottom inherit
And that you can match 2 like so:

Code: Select all

background-position: top left;

There

Jack

[Marc]

Originally Posted by jackfranklin

If you set the width to greater than you will need the background-repeat then.

EDit - Ok, I tried.

If you set the width and height to be greater than your image, then you will need to use:

Code: Select all

background-repeat: no-repeat;

It will then default place your image in the top left of the containing div. To change this you need to add:

Code: Select all

background-position:

Remebering that the choices for background position are:
top right left center bottom inherit
And that you can match 2 like so:

Code: Select all

background-position: top left;

There

Jack

Thanks for that Jack! That clears everything up.

[Jack Franklin]

No worries happy to help

I'll have a whole site up soon with some of my small tutorials with stuff like this.

Jack