[SOLVED] using background images to fill div's

R8515198 · #1 (**permalink**) Sep 29th, 2007, 19:38

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

#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 · #2 (**permalink**) Sep 29th, 2007, 19:49

You will need a width (width of the image)

Jack Franklin · #3 (**permalink**) Sep 29th, 2007, 19:50

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 · #4 (**permalink**) Sep 29th, 2007, 20:07

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

Cheers

Dan

Marc · #5 (**permalink**) Sep 29th, 2007, 20:14

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 · #6 (**permalink**) Sep 29th, 2007, 20:45

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 · #7 (**permalink**) Sep 29th, 2007, 20:46

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

Jack Franklin · #8 (**permalink**) Sep 29th, 2007, 20:58

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 · #9 (**permalink**) Sep 29th, 2007, 21:03

Quote:

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 · #10 (**permalink**) Sep 29th, 2007, 21:05

No worries happy to help

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

Jack

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] having a couple of div's underneath each other?	cosmicbdog	Web Page Design	21	Dec 3rd, 2007 11:46
[SOLVED] Trouble hiding/showing DIV's	recreant	JavaScript Forum	5	Dec 3rd, 2007 05:57
[SOLVED] using background images in a list	marisa	Web Page Design	3	Nov 28th, 2007 12:55
[SOLVED] pentool with a fill?	ahwell	Flash & Multimedia Forum	7	Oct 31st, 2007 11:19
[SOLVED] Background Images	admiral1977	Starting Out	6	Oct 29th, 2007 15:31

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
[SOLVED] using background images to fill div's