slashjack Posted October 21, 2011 Share Posted October 21, 2011 Hi everyone, im sure this has been covered already, however i cant find it. How do you get an image to always be the size of a page, for example you have the body 800px but behind this is the background im talking about. Hope this makes sense! Thanks guys Link to comment Share on other sites More sharing options...
eTianbun Posted October 21, 2011 Share Posted October 21, 2011 Css3 background-size:100% 50px can do that, but its not yet standard. or try using <img src="bgImage.png" style="width:100%; height:50px" position:absolute; z-index:-999/> Link to comment Share on other sites More sharing options...
slashjack Posted October 21, 2011 Author Share Posted October 21, 2011 Thank you, that works! However i cant seem to get the other stuff on top of the background image, even with z-index...Any ideas? Link to comment Share on other sites More sharing options...
eTianbun Posted October 21, 2011 Share Posted October 21, 2011 The code i gave you, is supposed to work. Did you add the minus(-) sign? adding it, will place the <img> tag behind all other elements in the page. Link to comment Share on other sites More sharing options...
slashjack Posted October 23, 2011 Author Share Posted October 23, 2011 I have fixed it so far. However there seems to be a white margin on the top and left, ive tried to add margin-top:0px; but then that messes up the rest of it.Any ideas? Link to comment Share on other sites More sharing options...
Krewe Posted October 23, 2011 Share Posted October 23, 2011 To fix that just go/make a .css file.In side the css file put this: html, body{margin:0;padding:0;} ---------------------------------------------------- Css3 background-size:100% 50px can do that, but its not yet standard. or try using <img src="bgImage.png" style="width:100%; height:50px" position:absolute; z-index:-999/> Is Background-Size: widely supported by Chrome, Firefox, Opera, IE, etc. now? Last I read it was hardly supported. Link to comment Share on other sites More sharing options...
slashjack Posted October 24, 2011 Author Share Posted October 24, 2011 The margin and padding really doesnt work...it makes the whole thing odd, my css file is this... .bg {z-index:-999;position:absolute;height:100%;width:100%margin:0;padding:0;} Link to comment Share on other sites More sharing options...
Ingolme Posted October 24, 2011 Share Posted October 24, 2011 The margin and padding really doesnt work...it makes the whole thing odd, my css file is this... .bg {z-index:-999;position:absolute;height:100%;width:100%margin:0;padding:0;} The margin and padding have to be on the <html> and <body> elements.html, body {margin: 0;padding: 0;} Link to comment Share on other sites More sharing options...
slashjack Posted October 24, 2011 Author Share Posted October 24, 2011 The margin and padding have to be on the <html> and <body> elements.html, body {margin: 0;padding: 0;} Yep! Thank you so much Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.