adding mutliple images to an CSS background

Reply

Join Date: Jun 2009
Posts: 2
Reputation: hrohibil is an unknown quantity at this point 
Solved Threads: 0
hrohibil hrohibil is offline Offline
Newbie Poster

adding mutliple images to an CSS background

 
0
  #1
Jun 27th, 2009
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
CssHelpOnImage.jpg  
Reply With Quote Quick reply to this message  
Join Date: Jan 2007
Posts: 3,203
Reputation: MidiMagic has a spectacular aura about MidiMagic has a spectacular aura about 
Solved Threads: 164
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Nearly a Senior Poster

Re: adding mutliple images to an CSS background

 
0
  #2
Jun 28th, 2009
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.
Daylight-saving time uses more gasoline
Reply With Quote Quick reply to this message  
Join Date: Jun 2009
Posts: 2
Reputation: hrohibil is an unknown quantity at this point 
Solved Threads: 0
hrohibil hrohibil is offline Offline
Newbie Poster

Re: adding mutliple images to an CSS background

 
0
  #3
Jun 29th, 2009
Originally Posted by MidiMagic View Post
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
Reply With Quote Quick reply to this message  
Join Date: Jun 2007
Posts: 211
Reputation: macneato is an unknown quantity at this point 
Solved Threads: 18
macneato's Avatar
macneato macneato is offline Offline
Posting Whiz in Training

Re: adding mutliple images to an CSS background

 
0
  #4
Jul 2nd, 2009
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.
If this reply solved your problem, please add to my reputation and don't forget to mark this thread as solved.
Reply With Quote Quick reply to this message  
Reply

This thread is more than three months old.
Perhaps start a new thread instead?
Message:



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC