confused and dazed Posted December 2, 2011 Share Posted December 2, 2011 I have been looking around and reading up on this and this is the simplest way I have been able to find so far... It still has not worked for me and there has to be a better way. Anyone? ***************<li><span><span><span><span>Boby</span></span></span></span></li> li { background: url(boby.jpg) center no-repeat; }li span { background: url(corner_top_right.gif) top right no-repeat; display: block; }li span span { background: url(corner_bottom_right.gif) bottom right no-repeat; }li span span span { background: url(corner_bottom_left.gif) bottom left no-repeat; }li span span span span { background: url(corner_top_left.gif) top left no-repeat; padding: 0.5em; }*************** Link to comment Share on other sites More sharing options...
Alluring Posted December 2, 2011 Share Posted December 2, 2011 You can get the answer on w3Schools at: http://www.w3schools...backgrounds.asp CSS3 Multiple Background Images is about halfway down that page. It is supported across all browsers (but not all versions). You can apply an internal style to each <li> tag with the images you'd like or declare it in your CSS sheet. Link to comment Share on other sites More sharing options...
confused and dazed Posted December 2, 2011 Author Share Posted December 2, 2011 Thank - I went to this link and tried to do two different images one that repeats for the main background and one that is positioned in the center. Why will this code not work? <html><head><style type="text/css">body{background-image:url(pic1.jpg),url(pic2.jpg);background-position:left top,center;background-repeat:repeat,no-repeat;}</style></body></head></html> Link to comment Share on other sites More sharing options...
Alluring Posted December 2, 2011 Share Posted December 2, 2011 Ok, first: please don't read this the wrong way, I don't want this to come across as criticism. Second: your <head> tag needs to be opened and closed at the top. That's a big problem right there. I'm not sure why you're putting multiple images in an <li> tag, but you can if you'd like. Here's what the proper code should look like: <!DOCTYPE html><head> <style type="text/css"><!--.style1 {background-image:url(img_flwr.gif), url(img_tree.gif);}--></style> </head> <body> <ul><li class="style1"></li><li></li><li></li></ul> </body></html> You can start with that and I would suggest maybe using <div> tags or something else. Are you trying to make a nav bar? Let me know how it turns out. -Grahamhttp://alluringmedia.net Link to comment Share on other sites More sharing options...
confused and dazed Posted December 2, 2011 Author Share Posted December 2, 2011 There is a reason why my name in this forum is Confused and Dazed.I have no reason why I am using <li> tags I just saw this code in a forum somewhere and though it might work for me.I will start over with <div> tags and see how far it gets me. Link to comment Share on other sites More sharing options...
confused and dazed Posted December 6, 2011 Author Share Posted December 6, 2011 I never did get back to this one... Here is my code and both of my pictures are not showing up in my <div> tagAny suggestions? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><style type="text/css">.style1 {background-image:url(img1.jpg),url(img2.jpg);}</style><div class="style1" style="width:500px;height:150px; border:1px solid navy;"><br><input type="button" value="button over my pictures"><br></html> Link to comment Share on other sites More sharing options...
ShadowMage Posted December 6, 2011 Share Posted December 6, 2011 If that is your full code, you have several issues. - There's no <head>- There's no <body>- Your <div> is not closed Also, make sure the images are in the same folder as this HTML file. If they aren't, you need to modify the image URLs to match their location relative to the HTML file. Link to comment Share on other sites More sharing options...
confused and dazed Posted December 7, 2011 Author Share Posted December 7, 2011 This works<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><style type="text/css">.style1 {background-image:url(img1.jpg);}</style></head><body><div class="style1" style="width:1000px;height:1000px; border:1px solid navy;"><br><input type="button" value="button over my pictures"></div><br></body></html> This Does NOT<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><style type="text/css">.style1 {background-image:url(img1.jpg),url(img2.jpg);}</style></head><body><div class="style1" style="width:1000px;height:1000px; border:1px solid navy;"><br><input type="button" value="button over my pictures"></div><br></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted December 7, 2011 Share Posted December 7, 2011 Which browser are you testing in?I believe multiple background images works in all browsers but Internet Explorer. One problem you may be having is that one of the background images is completely covering the other one. If it's not a transparent PNG or GIF, you probably won't see the one behind it. Try this for an example: background: url(img1.jpg) no-repeat top left, url(img2.jpg) no-repeat top right; Link to comment Share on other sites More sharing options...
confused and dazed Posted December 7, 2011 Author Share Posted December 7, 2011 I have IE and the second set of code does not show any images at all.So I found this code and it appears to be working somewhat but it just needs to be tweaked a bit yet... Do you recommend this style of code? Will it be readable by all browsers? Will it be robust? *******************************<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><style type="text/css">.nice { border: 1px solid #ffcf86; padding-left: 0px; padding-right: 0px; background: url(img1.jpg) no-repeat 50% 25%;}.nice:before{ display: block; height: 500px; margin-left: 0px; margin-right: 0px; margin-top: 50px; font-size: 0;}.nice:before { content: url(img2.jpg); background: url(img3.jpg) no-repeat 100px 100px;}</style></head><body><div class='nice' style="width:800px;height:1000px; border:1px solid navy;"></div></body></html> Link to comment Share on other sites More sharing options...
ShadowMage Posted December 7, 2011 Share Posted December 7, 2011 IE 8 and below do not support multiple background images. As for the new code you posted, I don't know how robust it will be, but AFAIK all browsers support the :before psuedo-element, so if it's working for you go ahead and use it. Link to comment Share on other sites More sharing options...
confused and dazed Posted December 7, 2011 Author Share Posted December 7, 2011 It appears IE does not like this code either. I can almost get the images in the placement I would like to see it but the button is displaced below the images... if anyone would like to play with this code I would like to see it otherwise I guess I will keep to one background image inside the <div> tag Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.