Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

100% Background image prob in IE

Options
  • 02-07-2010 11:48am
    #1
    py2006
    Registered Users Posts: 9,847 ✭✭✭


    Hi all,

    I am experimenting with having a background image on a page. I achieved this ok but all along I was testing it in my default browser (chrome) and it worked perfectly. However, I just looked at it in IE and image scales horizontally but not vertically.

    Here is my CSS: (I have included it all in case there is something small that interferes with it)
    body {
[B]	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #333;[/B]
}


[B]#imagewrapper {
	height: 100%;
	width: 100%;
	z-index: 0;[/B]
}

#main {
	position:absolute;
	width:432px;
	height:435px;
	z-index:1;
	left: 81px;
	top: 224px;
	border-right: thin #FFF;
	border-left:thin #FFF;
	padding: 5px;
	cursor: crosshair;
	background-color: #000;
	filter:alpha(opacity=60); 
	opacity:0.6;

		}
		
	#maintext  {
		position: relative;
		width: 425px;
		height: 425px;
		z-index: 2;

	}
p {
	
	font-family: "Century Gothic";
	font-size: 15px;
	font-style: normal;
	line-height: 20px;
	color: #FFF;
	text-align:justify;
}


    Ok, now here is the HTML part:
    <body>
<div id="imagewrapper"> <img src="images/office.jpg" width="100%" height="100%" /></div>

<div id="main">
 <div id="maintext"> 
 
  <p>text text text</p>
  
  </div>
</div>

</body>
</html>

    As I said it works perfectly in Chrome, Safari but not so in IE and Firefox. Is there something I can add to this to fix the issue?

    Thanks in advance! :)


Comments

  • Options
    #2
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    imagewrapper is 100% of its container (the body) but the body doesn't have a height.

    Try adding "height:100%" the body element, and possibly to a new html CSS entry

    Also bear in mind that the aspect ratio of the image will be screwed on different screens.


  • Options
    #3
    Goodshape
    Registered Users Posts: 8,488 ✭✭✭Goodshape


    Try setting the width and height of the image in the CSS. I don't think "100%" works as a value for the width or height property of the img element. It expects pixels here.
    #imagewrapper {
	height: 100%;
	width: 100%;
	z-index: 0;
}
#imagewrapper img {
	height: 100%;
	width: 100%;
}


  • Options
    #4
    py2006
    Registered Users Posts: 9,847 ✭✭✭py2006


    Liam Byrne wrote: »
    imagewrapper is 100% of its container (the body) but the body doesn't have a height.

    Try adding "height:100%" the body element, and possibly to a new html CSS entry

    Also bear in mind that the aspect ratio of the image will be screwed on different screens.

    Tried that and no luck! I don't mind the image distorting slightly because of different screens. I am just experimenting at this stage anyway!
    Goodshape wrote: »
    Try setting the width and height of the image in the CSS. I don't think "100%" works as a value for the width or height property of the img element. It expects pixels here.
    #imagewrapper {
	height: 100%;
	width: 100%;
	z-index: 0;
}
#imagewrapper img {
	height: 100%;
	width: 100%;
}

    Good suggestion, tried it but no joy! :(


  • Options
    #5
    Goodshape
    Registered Users Posts: 8,488 ✭✭✭Goodshape


    I just tried this and it seems to work on FF3.
    body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #333;
}


#imagewrapper {
	height: 100%;
	width: 100%;
	z-index: 0;
}

#imagewrapper img {
	height: 100%;
	width: 100%;
	z-index: 0;
}

#main {
	position:absolute;
	width:432px;
	height:435px;
	z-index:1;
	left: 81px;
	top: 224px;
	border-right: thin #FFF;
	border-left:thin #FFF;
	padding: 5px;
	cursor: crosshair;
	background-color: #000;
	filter:alpha(opacity=60); 
	opacity:0.6;

		}
		
	#maintext  {
		position: relative;
		width: 425px;
		height: 425px;
		z-index: 2;

	}
p {
	
	font-family: "Century Gothic";
	font-size: 15px;
	font-style: normal;
	line-height: 20px;
	color: #FFF;
	text-align:justify;
}

    
<div id="imagewrapper"> <img src="images/office.jpg"></div>

<div id="main">
 <div id="maintext"> 
 
  <p>text text text</p>
  
  </div>
</div>


  • Options
    #6
    Liam Byrne
    Closed Accounts Posts: 18,163 ✭✭✭✭Liam Byrne


    I tried the OP's original code and it worked in IE8, IE8 in IE7 compatibility mode & FF 3.6.6 on Vista


  • Advertisement
  • Options
    #7
    py2006
    Registered Users Posts: 9,847 ✭✭✭py2006


    Liam Byrne wrote: »
    I tried the OP's original code and it worked in IE8, IE8 in IE7 compatibility mode & FF 3.6.6 on Vista

    Well I have IE8 and it doesn't work! :-(


  • Options
    #8
    py2006
    Registered Users Posts: 9,847 ✭✭✭py2006


    Oh for the love of god:

    position: fixed; sorted it out!!! :eek::rolleyes::o


Advertisement