473,808 Members | 2,758 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How to display horizontal and a vertical background images in IE

2 New Member
I need a web page to be made with a horizontal image and a vertical image running at the top and left side of the page respectively..

I have used
Expand|Select|Wrap|Line Numbers
  1. body {
  2.  
  3.     background-image: url(../images/header.gif) , url(../images/menu.gif);
  4.     background-repeat: repeat-x, repeat-y;
  5.     font-family: Verdana, san-serif;
  6.     margin: 0px;
  7.     height: 100%;
  8.     width: 100%;
  9.     }
  10.  
  11.  
It worked perfectly fine with FF and Chrome. But IE could not display both the images. I m using IE8..


I 'm pasting entire CSS.. Please suggest!!

Expand|Select|Wrap|Line Numbers
  1. *
  2. {
  3.     margin: 0em;
  4.     padding: 0em;
  5. }
  6.  
  7. body {
  8.     background-image: url(../images/header.gif) , url(../images/menu.gif);
  9.     background-repeat: repeat-x, repeat-y;
  10.     font-family: Verdana, san-serif;
  11.     margin: 0px;
  12.     height: 100%;
  13.     width: 100%;
  14.     }
  15.  
  16. #container {
  17.     width: 100%;
  18.     height:100%; 
  19.     }
  20.  
  21. #header {
  22.  
  23.     border-bottom: 1px solid #ffffff ;
  24.     height: 45px;
  25.     position: relative;
  26.     width: 100%;
  27.     }
  28. #content {
  29.  
  30.     clear: both;
  31.     margin: 0px;
  32.     width: 1259px;
  33.     position: relative;
  34.     }
  35.  
  36. #menu { 
  37.  
  38.     float: left;
  39.     padding: 15px;
  40.     position: relative;
  41.     text-align: left;
  42.     width: 170px;
  43.     height: 100%;
  44.     }
  45. #data {
  46.     float: left;
  47.     margin: 25px;
  48.     position: relative;
  49.     width: 1000px;
  50.     }
  51.  
and the html page looks like..
Expand|Select|Wrap|Line Numbers
  1. <head>... </head>
  2. <body>
  3. <div id="container">
  4.     <div id="header">< img ..... /></div>
  5.         <div id = "content">
  6.            <div id = "menu">...</div>
  7.            <div id = "data">...</div>
  8.           </div>          
  9. </container>
  10. </body>
  11.  
May 26 '10 #1
3 1952
drhowarddrfine
7,435 Recognized Expert Expert
Multiple background images is a CSS3 property available in every modern browser and isn't available in IE.
May 26 '10 #2
Rocky38
2 New Member
@drhowarddrfine
So, How can I get to the design that I wanted?
May 26 '10 #3
Niheel
2,456 Recognized Expert Moderator Top Contributor
Break your page up into multiple containers and run different backgrounds for each container, just like you added a background for body tags.
May 26 '10 #4

Sign in to post your reply or Sign up for a free account.

Similar topics

2
16125
by: lorelei | last post by:
Hey all, I have found two seperate HTML codes which claim to stop background images from being tiled. Neither of them seem to be working. I'm writing my codes in Textpad, and use Internet Explorer 6 for my browser. Below you will find the two codes I've found. Can anyone tell me why the hell they're not working?! This is driving me insane... moreso!!!!
3
18849
by: MediaDesign | last post by:
so there's the problem: my text links have background images and when I put links around images on my page, they too get the background image treatment which I do not...I have tried several possible solutions and nothing has worked: my html code: <div class="borderCCC"> <div class="clients"><a href="../index.html"><img
3
2041
by: ribinha | last post by:
Hi all, I am having problems loading background images on my pages. I have created a css to display the images. It works just fine on my test box, but when I tried on real pages it wont upload any images everythin else displays just fine. I used a table and added a background image to every row. when i call the page it shows that it is preloading images but never displays. I have tried to place the css code on the page itself as well. the...
2
1880
by: Steve Franks | last post by:
I am familiar with the fact that you have to use runat=server and links staring with "~/" to ensure proper mapping of paths to relative URLs when using master pages. However this does not seem to work in all cases. For instance, assume I have a "/mysite/images" subdirectory with mybackground.gif and mygif.gif in there. Further assume I have a master page called mastertest.aspx located in /mysite/myfolder".
0
2080
by: Jeb Hunter | last post by:
Well, how can I describe this succinctly? I have a page with DIVs that us background images to produce a border effect. It works perfectly well, but I want to make up (for now) 3 different border/background effects. Rather than duplicate the entire chunk of CSS 3 times, I thought "Gee, I should only have to specify the 3 backgrounds (all the other placement directives would be identical). However I must not be correctly specifying the...
1
2667
by: simct | last post by:
As part of my learning, I wrote the following codes to display 2 background images side-by-side: <head> <style type="text/css"> .image1 {background-image: url(images/sw1.jpg); background-repeat: no-repeat} .image2 {background-image: url(images/sw2.jpg); background-repeat: no-repeat}
6
7239
by: Rob | last post by:
Hello, I'm sure this has come up before. I have need for a collection of all elements/objects in an HTML document that have any kind of an attribute (HTML or CSS) that is making use of a URL to display an image. document.images only seems to reference image tags. The collection needs to include background images, input type = image, image maps, css assigned background, etc. Honestly, I am probably not aware of all the possibilities...
1
1592
by: tlonthedl | last post by:
Hi, I am designing a theme for a wordpress blog and I am having some problems with repeating background images. Specifically, the background image will not show or repeat in the body, or in the sidebar. I realize this could be a php problem but I wanted to check and make sure it wasn't a css issue first. The repeating image will work in the .content section. I don't get it! Thanks. Here is my stylesheet:
1
12270
by: desktop | last post by:
Is there some function i C++ that prints a horizontal/vertical line in a shell like printHor(2,7); that prints a straight continuous line with the size of 5 chars?
1
1952
by: suchar | last post by:
I have to alter one of wordpress themes, I got new images to replace the old ones, but ingenious designer has made some changes driving me mad. As it is I need to place two distinct background images on left and right side of main body. For I am only half-baked in such things I do not even know whether it is possible. Current css file states this: body { ... background: #ffffff url('images/bg.jpg') repeat-x; } #bbody { background:...
0
9721
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9600
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10374
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10114
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7651
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5548
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4331
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
3859
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3011
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.