Tom Posted August 18, 2010 Share Posted August 18, 2010 I'm trying to get it to repeat a image and it isn't working, anyone know why? I tried the background-image: repeat-y method but it didn't work :( .container { position: relative; height: 100%; } .left-element { position: absolute; left: 0; float: left; width: 120px; height: 100%; } .right-element { position: absolute; right: 0; float: right; width: 120px; height: 100%; text-align: right; /* depends on element width */ } <div class="container"> <div class="left-element"> <img src='{style_images_url}/bgleft.png'> </div> <div class="right-element"> <img src='{style_images_url}/bgright.png'> </div> </div> Link to comment Share on other sites More sharing options...
0 SoapyHamHocks Member Posted August 18, 2010 Member Share Posted August 18, 2010 I'm trying to get it to repeat a image and it isn't working, anyone know why? I tried the background-image: repeat-y method but it didn't work :( background: url(asdasds.png) repeat-y; or add background-repeat: repeat-y; Link to comment Share on other sites More sharing options...
0 lt8480 Posted August 18, 2010 Share Posted August 18, 2010 the image must be set as a background to the div for it to repeat, and it should work fine. background: url(bgleft.png) repeat-y; Of course it will only repeat within the div, and I suspect that the div isn't stretching 100% height, as working with 100% height positioned divs is not easy to get working for cross compatibility. I find it easier to work out a layout by assigning colous to the backgrounds of elements. That way you can see what the div is doing exactly. Link to comment Share on other sites More sharing options...
0 Antaris Veteran Posted August 18, 2010 Veteran Share Posted August 18, 2010 You can't get an foreground image (read: img) to repeat, you need to apply it as a background image: background-image: url('/Images/bgleft.png'); background-repeat: repeat-y; Link to comment Share on other sites More sharing options...
0 Tom Posted August 18, 2010 Author Share Posted August 18, 2010 background: url(asdasds.png) repeat-y; or add background-repeat: repeat-y; I actually added this and it didn't work still :( Link to comment Share on other sites More sharing options...
0 SoapyHamHocks Member Posted August 18, 2010 Member Share Posted August 18, 2010 I actually added this and it didn't work still :( Remove the img attribute and do it like: .left-element { background: url(image.png) repeat-y; } Link to comment Share on other sites More sharing options...
0 Tom Posted August 18, 2010 Author Share Posted August 18, 2010 the image must be set as a background to the div for it to repeat, and it should work fine. background: url(bgleft.png) repeat-y; Of course it will only repeat within the div, and I suspect that the div isn't stretching 100% height, as working with 100% height positioned divs is not easy to get working for cross compatibility. I find it easier to work out a layout by assigning colous to the backgrounds of elements. That way you can see what the div is doing exactly. Well I can see what it's doing.. it just won't repeat. I tried the code you gave and still doesn't work :( Link to comment Share on other sites More sharing options...
0 Cupcakes Posted August 18, 2010 Share Posted August 18, 2010 .left-element { position: absolute; left: 0; float: left; width: 120px; height: 100%; background: url('{style_images_url}/bgleft.png') repeat; } .right-element { position: absolute; right: 0; float: right; width: 120px; height: 100%; background: url('{style_images_url}/bgright.png') repeat; text-align: right; /* depends on element width */ } <div class="container"> <div class="left-element"> </div> <div class="right-element"> </div> </div> There are: repeat > Repeats vertically and horizontally repeat-y > Repeats vertically repeat-x > Repeats horizontally Also: You need to clear the floats: http://www.positioniseverything.net/easyclearing.html. Right now your two floated divs are dependent on the height of container. Since you haven't cleared 'em, the container essentially has no height. So your two floated elements have no height.. Probably why your background won't show. If you change one of the classes to background: #000; you probably won't see anything at all. Link to comment Share on other sites More sharing options...
0 Tom Posted August 18, 2010 Author Share Posted August 18, 2010 Remove the img attribute and do it like: .left-element { background: url(image.png) repeat-y; } tried this and it just messed up the whole skin :o Link to comment Share on other sites More sharing options...
0 Tom Posted August 18, 2010 Author Share Posted August 18, 2010 I tried the advice everyone gave but it still doesn't work, heres a update. .container { position: relative; height: 100%; } .left-element { position: absolute; left: 0; width: 120px; height: 100%; background: url('{style_images_url}/bgleft.png') repeat-y; } .right-element { position: absolute; right: 0; width: 120px; height: 100%; background: url('{style_images_url}/bgright.png') repeat-y; text-align: right; /* depends on element width */ } <div class="container"> <div class="left-element"> </div> <div class="right-element"> </div> </div> Link to comment Share on other sites More sharing options...
0 LaP Posted August 18, 2010 Share Posted August 18, 2010 It should work. The path of the image needs to be relative to the css and not the web page. Height 100% will never work with float, relative or absolute positionning. Height will actually be working as height auto which means the div wont have any height since there's no content inside them. There's no need to float left and position absolute at the same time. http://translate.google.ca/translate?u=http%3A%2F%2Fwww.alsacreations.com%2Ftuto%2Flire%2F588-trois-colonnes-float.html&sl=fr&tl=en&hl=&ie=UTF-8 .container { position: relative; height: 100px; } .left-element { position: absolute; left: 0; width: 120px; height: 100px; background: url('{style_images_url_relative_to_css_file}/bgleft.png') top left repeat-y; } .right-element { position: absolute; right: 0; width: 120px; height: 100px; background: url('{style_images_url_relative_to_css_file}/bgright.png') top right repeat-y; text-align: right; /* depends on element width */ } <div class="container"> <div class="left-element"> </div> <div class="right-element"> </div> </div> Link to comment Share on other sites More sharing options...
0 Cupcakes Posted August 18, 2010 Share Posted August 18, 2010 Purify, you'll need to correct your css itself for your 100% height. Look over these examples to ensure you've code the necessary code: http://www.xs4all.nl/~peterned/examples/csslayout1.html http://www.tutwow.com/tips/quick-tip-css-100-height/ http://www.dave-woods.co.uk/?p=144 Link to comment Share on other sites More sharing options...
0 Tom Posted August 18, 2010 Author Share Posted August 18, 2010 It should work. The path of the image needs to be relative to the css and not the web page. Height 100% is un-reliable. Height might actually be working as height auto which means the div wont have any height since there's no content inside them. There's no need to float left and position absolute at the same time. http://translate.google.ca/translate?u=http%3A%2F%2Fwww.alsacreations.com%2Ftuto%2Flire%2F588-trois-colonnes-float.html&sl=fr&tl=en&hl=&ie=UTF-8 .container { position: relative; height: 100px; } .left-element { position: absolute; left: 0; width: 120px; height: 100px; background: url('{style_images_url_relative_to_css_file}/bgleft.png') top left repeat-y; } .right-element { position: absolute; right: 0; width: 120px; height: 100px; background: url('{style_images_url_relative_to_css_file}/bgright.png') top right repeat-y; text-align: right; /* depends on element width */ } <div class="container"> <div class="left-element"> </div> <div class="right-element"> </div> </div> Still nothing. Link to comment Share on other sites More sharing options...
0 lt8480 Posted August 18, 2010 Share Posted August 18, 2010 try background: #336699 url('{style_images_url_relative_to_css_file}/bgright.png') top right repeat-y; do you see any dark blue? Also can I just check... you're not putting the code together in your website just like you have shown it are you? CSS should be linked to or placed between css tags in the header. <html> <head> <title>Testing</title> <style type="text/css"> body { background: #336699 url('{style_images_url_relative_to_css_file}/bgright.png') top right repeat-y; } </style> </head> Link to comment Share on other sites More sharing options...
0 Cupcakes Posted August 18, 2010 Share Posted August 18, 2010 Purify, I'd say work outside of IPB right now (I'm assuming you are because of the image path). Create a standalone html page with the coding you need JUST for that container you're working on. Include the appropriate css (body, container, left/right), and images. Test in that. That's your best bet to resolving the issue. That way you're not inundated with other code and/or can see if there's maybe a conflict with default skin CSS and your CSS. Link to comment Share on other sites More sharing options...
0 LaP Posted August 18, 2010 Share Posted August 18, 2010 Still nothing. Absolute and float elements are not part of the normal web page flow. You need to specify a width and height or they will auto adjust to the contents inside them. This might be the reason you could not see the background images. It might be because of the path which needs to be relative to the file the css code is in. Personally i would recommend to not use tricks to make height:100% works with absolute and float positionning as it is not intended to work anyway. If you want the background of both columns to auto adjust to the height of container then imo it's better to merge both background together with a transparent filler in between and put this background inside container. Finally i recommend to use a fixed width for your web site. Width 100% is a pain in the ass to work with when using css positionning unless the site layout is simple and the content is mostly text based (ie wikipedia). And anyway width 100% doesn't look right on big widescreen monitors as often there's not enough content to fill the screen. This has been tested and is working <html> <head> <title></title> <style type="text/css"> .container { position: relative; height: 1000px; width:760px; margin:0px auto; border:1px solid black; padding:0px 120px; } .left-element { position: absolute; left: 0; width: 120px; height: 1000px; background: url('cloud.jpg') top left repeat-y; } .right-element { position: absolute; right: 0; width: 120px; height: 1000px; background: url('cloud.jpg') top left repeat-y; text-align: right; } </style> </head> <body> <div class="container"> <div class="left-element"> </div> <div class="right-element"> </div> <p>ceci est un test</p> </div> </body> </html> Link to comment Share on other sites More sharing options...
0 Tom Posted August 18, 2010 Author Share Posted August 18, 2010 try background: #336699 url('{style_images_url_relative_to_css_file}/bgright.png') top right repeat-y; do you see any dark blue? Also can I just check... you're not putting the code together in your website just like you have shown it are you? CSS should be linked to or placed between css tags in the header. <html> <head> <title>Testing</title> <style type="text/css"> body { background: #336699 url('{style_images_url_relative_to_css_file}/bgright.png') top right repeat-y; } </style> </head> I don't see any blue, no :( Link to comment Share on other sites More sharing options...
0 Cupcakes Posted August 18, 2010 Share Posted August 18, 2010 LaP, you're missing crucial points in the CSS. If he copy/pastes that, it still won't work. html { height: 100%; } body { margin: 0; padding: 0; height: 100%; } That needs to be added to your example. Working example: http://dev.icupcake.org/neowin/purify.html Link to comment Share on other sites More sharing options...
0 Tom Posted August 18, 2010 Author Share Posted August 18, 2010 <html> <head> <title></title> <style type="text/css"> .container { position: relative; height: 1000px; width:800px; margin:0px auto; } .left-element { position: absolute; left: 0; width: 120px; height: 1000px; background: url('cloud.jpg') top left repeat-y; } .right-element { position: absolute; right: 0; width: 120px; height: 1000px; background: url('cloud.jpg') top left repeat-y; text-align: right; } </style> </head> <body> <div class="container"> <div class="left-element"> </div> <div class="right-element"> </div> </div> </body> </html> Didn't work either :( Link to comment Share on other sites More sharing options...
0 Cupcakes Posted August 18, 2010 Share Posted August 18, 2010 There's a reason why it didn't work. See my post above yours. K. Link to comment Share on other sites More sharing options...
0 Tom Posted August 18, 2010 Author Share Posted August 18, 2010 LaP, you're missing crucial points in the CSS. If he copy/pastes that, it still won't work. html { height: 100%; } body { margin: 0; padding: 0; height: 100%; } That needs to be added to your example. Working example: http://dev.icupcake.org/neowin/purify.html If I added this it would intersect with the rest of the coding on the forum :( Link to comment Share on other sites More sharing options...
0 Cupcakes Posted August 18, 2010 Share Posted August 18, 2010 Then either nix the idea you have or you go through the code to make it compatible. You have to add that code for 100% height to work, there is no work around. Link to comment Share on other sites More sharing options...
0 Tom Posted August 18, 2010 Author Share Posted August 18, 2010 I appreciate the help from everyone greatly and thanks everyone for trying :) Thanks guys <3 Link to comment Share on other sites More sharing options...
0 LaP Posted August 18, 2010 Share Posted August 18, 2010 Didn't work either :( i tested it and it works on both IE 7 and Fireox 3. The path fo your image must be wrong. Link to comment Share on other sites More sharing options...
Question
Tom
I'm trying to get it to repeat a image and it isn't working, anyone know why? I tried the background-image: repeat-y method but it didn't work :(
.container { position: relative; height: 100%; } .left-element { position: absolute; left: 0; float: left; width: 120px; height: 100%; } .right-element { position: absolute; right: 0; float: right; width: 120px; height: 100%; text-align: right; /* depends on element width */ } <div class="container"> <div class="left-element"> <img src='{style_images_url}/bgleft.png'> </div> <div class="right-element"> <img src='{style_images_url}/bgright.png'> </div> </div>Link to comment
Share on other sites
23 answers to this question
Recommended Posts