Advertisement
Help Keep Boards Alive. Support us by going ad free today. See here: https://subscriptions.boards.ie/.
If we do not hit our goal we will be forced to close the site.

Current status: https://keepboardsalive.com/

Annual subs are best for most impact. If you are still undecided on going Ad Free - you can also donate using the Paypal Donate option. All contribution helps. Thank you.
https://www.boards.ie/group/1878-subscribers-forum

Private Group for paid up members of Boards.ie. Join the club.

100% Background image prob in IE

  • 02-07-2010 11:48AM
    #1
    py2006
    Registered Users, Registered Users 2 Posts: 9,845 ✭✭✭


    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

  • #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.


  • #3
    Goodshape
    Registered Users, Registered Users 2 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%;
}


  • #4
    py2006
    Registered Users, Registered Users 2 Posts: 9,845 ✭✭✭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! :(


  • #5
    Goodshape
    Registered Users, Registered Users 2 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>


  • #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
  • #7
    py2006
    Registered Users, Registered Users 2 Posts: 9,845 ✭✭✭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! :-(


  • #8
    py2006
    Registered Users, Registered Users 2 Posts: 9,845 ✭✭✭py2006


    Oh for the love of god:

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


Advertisement