943,723 Members | Top Members by Rank

Ad:
Jun 27th, 2009
0

adding mutliple images to an CSS background

Expand Post »
Hi forum.
I really need help on this issue.

I have 5 pictures, which I would like to be the layout on my front web page. Picture 1 is one big picture which will fill up the whole screen. The other pictures I would like to add on that background (pic 1). I hope this make sence.

How can I acheive this?

I attached a jpeg pic to get the visual idea.

Please advice someone...

regards Hamid
Denmark
Attached Thumbnails
Click image for larger version

Name:	CssHelpOnImage.jpg
Views:	26
Size:	17.6 KB
ID:	10607  
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
hrohibil is offline Offline
2 posts
since Jun 2009
Jun 28th, 2009
0

Re: adding mutliple images to an CSS background

There are a number of ways to do this, some more successful than others.

1. You could edit the pictures together into one image with an image editor, and then adjust the size of the picture to fit the width of the browser viewport with the width: 100%; style.

2. Use the big image (maybe with the top image edited in) as the background. Use css relative (%) styles to position the other images and adjust their sizes.

3. Use CSS to position all of the images.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007
Jun 29th, 2009
0

Re: adding mutliple images to an CSS background

Click to Expand / Collapse  Quote originally posted by MidiMagic ...
There are a number of ways to do this, some more successful than others.

1. You could edit the pictures together into one image with an image editor, and then adjust the size of the picture to fit the width of the browser viewport with the width: 100%; style.

2. Use the big image (maybe with the top image edited in) as the background. Use css relative (%) styles to position the other images and adjust their sizes.

3. Use CSS to position all of the images.
Thanks for reply. Ok. So what I mean with these pic is really, that they will be rounded shaped boxes, which I hope I can place with css, and then in dreamweaver create some tables in them or something like that, so that I can fill the boxes out with what-ever applications. Can this be achieved?

So maybe your option 3 is the way, because with 1 and 2 I wont be able to create e.g menu, buttons and so on.

Or is easy to cut/slice a hole header from photoshop and implement it in dreamweaver to live actions??

regards Hamid
Denmark
Reputation Points: 10
Solved Threads: 0
Newbie Poster
hrohibil is offline Offline
2 posts
since Jun 2009
Jul 2nd, 2009
0

Re: adding mutliple images to an CSS background

Ok... Let me try help you out, with css do the following:

Image 6 will be your body background.
Image 5 will be your header background.
Image 2 your main content background.
Image 1, 3, 4 will have the same class with an additional class to change the background accordingly. eg. (class="wrapper img1") (class="wrapper img3") ect.

Oh, if you using css to style and position these divs, there is no need to nest tables inside. Just use enough padding and you should get away with it.
Reputation Points: 46
Solved Threads: 48
Posting Pro in Training
macneato is offline Offline
410 posts
since Jun 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: ID and class in CSS?
Next Thread in HTML and CSS Forum Timeline: how to receive data from html form...?





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC