| | |
adding mutliple images to an CSS background
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
![]() |
•
•
Join Date: Jun 2009
Posts: 2
Reputation:
Solved Threads: 0
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
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
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
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.
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
•
•
Join Date: Jun 2009
Posts: 2
Reputation:
Solved Threads: 0
•
•
•
•
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 thewidth: 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.
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
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.
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.
![]() |
Similar Threads
- javascript css background-image (JavaScript / DHTML / AJAX)
- css help (HTML and CSS)
- Naming a CSS Background Image for JavaScript (JavaScript / DHTML / AJAX)
- css background image problem (HTML and CSS)
- CSS background (HTML and CSS)
- Need help to display background images using css (HTML and CSS)
- Help with CSS - background extending to 100% (HTML and CSS)
Other Threads in the HTML and CSS Forum
- Previous Thread: ID and class in CSS?
- Next Thread: how to receive data from html form...?
| Thread Tools | Search this Thread |
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7






