Jump to content

background images/same div


jimfog
 Share

Recommended Posts

I want to apply two background images to the same div.The one of them will occupy the whole element and the second will be placed in the top portion of the element.I have used both techniques numerous times, but it is the first time i want to use them simultaneously on the same element.I have tried to do it myself but the one image replaces the other.So, can it be done?If yes, how?

Link to comment
Share on other sites

Only 1 background image to each element is allowed, sorry! but you can add large image to outer container element, with a position: relative styling, then add the smaller background image to inner container element using position: absolute; which should be given the same width, and height required to show the image at top.

Link to comment
Share on other sites

Amazing!!!
but in the meantime you can just nest 2 divs. here is the basic...supply your own images
<div style="background: #aaccff url('blue_gradient_background.jpg') top left; width:500px; height:500px;"><div style="background: url('facebook_icon.jpg') top left repeat-x; width:500px; height:500px;"><p>text goes here</p></div></div>

Guy

Link to comment
Share on other sites

but in the meantime you can just nest 2 divs. here is the basic...supply your own images
<div style="background: #aaccff url('blue_gradient_background.jpg') top left; width:500px; height:500px;"><div style="background: url('facebook_icon.jpg') top left repeat-x; width:500px; height:500px;"><p>text goes here</p></div></div>

Guy

Probably i will use 2 divs(as stated above) and do my job.Thanks all of you for your advice.
Link to comment
Share on other sites

Only 1 background image to each element is allowed, sorry! but you can add large image to outer container element, with a position: relative styling, then add the smaller background image to inner container element using position: absolute; which should be given the same width, and height required to show the image at top.
There is one last thing though that needs some explanation as it is a question i always had.You are saying that the outer element should be relative positioned and the inner element should be absolute positioned.Despite the fact that you give an explanation , can you elaborate a little please on the implications it have when an absolute element is positioned in a relative element.What will happen when the opposite applies-a relative element in an absolute one?Thanks.
Link to comment
Share on other sites

check out example below, note the position absolute element occupies no space within the layout, and the other elements (such as paragraphs with Latin text) will occupy the space it has left.the paragraphs are using position relative only because i need to place <p> above position absolute elements by using z-index:.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">p {color:#FF0033; position:relative; z-index:5; padding-top:120px;}#wrapper1{ width:800px; height:200px; background-color:#FFCC33; margin: 50px auto;}#absolute1{height:200px;width:200px; position:absolute;  background-color:#33FF66; left:0; top:0;}#wrapper2{ width:800px; height:200px; background-color:#FFCC33; margin: 50px auto; position:relative;}#absolute2{height:200px;width:200px; position:absolute;  background-color:#33FF66; left:0; top:0;}#wrapper3{ width:800px; height:200px; background-color:#FFCC33; margin: 50px auto; position:relative;}#absolute3{height:200px;width:200px; position:absolute;  background-color:#33FF66; left:300px; top:0;}#relative3{height:100px;width:200px; position:relative;  background-color:#0033CC; left:0; top:0;}</style></head><body><div id="wrapper1"><p>Ut labore et dolore magna aliqua. Quis nostrud exercitation eu fugiat nulla pariatur. Cupidatat non proident, velit esse cillum dolore sunt in culpa. Sed do eiusmod tempor incididunt in reprehenderit in voluptate qui officia deserunt. Ut aliquip ex ea commodo consequat.</p><div id="absolute1">A positioned absolute element, using properties left:0; and top: 0;,  inside a element with no position relative will position itself to the outer most container with position relative, or if non found, to body ie viewing area of browser screen.</div></div><div id="wrapper2"><p>Ut labore et dolore magna aliqua. Quis nostrud exercitation eu fugiat nulla pariatur. Cupidatat non proident, velit esse cillum dolore sunt in culpa. Sed do eiusmod tempor incididunt in reprehenderit in voluptate qui officia deserunt. Ut aliquip ex ea commodo consequat.</p><div id="absolute2">Now! because the outer element is using position relative, the absolute element is restricted to this elements area, and places it self to top-left position of this element only.</div></div><div id="wrapper3"><p>Ut labore et dolore magna aliqua. Quis nostrud exercitation eu fugiat nulla pariatur. Cupidatat non proident, velit esse cillum dolore sunt in culpa. Sed do eiusmod tempor incididunt in reprehenderit in voluptate qui officia deserunt. Ut aliquip ex ea commodo consequat.</p><div id="absolute3"><div id="relative3">A relative element inside a positioned absolute element, will do what it normally does position itself relative to the element it is within.</div></div></div></body></html>

Link to comment
Share on other sites

check out example below, note the position absolute element occupies no space within the layout, and the other elements (such as paragraphs with Latin text) will occupy the space it has left.the paragraphs are using position relative only because i need to place <p> above position absolute elements by using z-index:.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*//*--*//*]]>*/</script><style type="text/css">p {color:#FF0033; position:relative; z-index:5; padding-top:120px;}#wrapper1{ width:800px; height:200px; background-color:#FFCC33; margin: 50px auto;}#absolute1{height:200px;width:200px; position:absolute;  background-color:#33FF66; left:0; top:0;}#wrapper2{ width:800px; height:200px; background-color:#FFCC33; margin: 50px auto; position:relative;}#absolute2{height:200px;width:200px; position:absolute;  background-color:#33FF66; left:0; top:0;}#wrapper3{ width:800px; height:200px; background-color:#FFCC33; margin: 50px auto; position:relative;}#absolute3{height:200px;width:200px; position:absolute;  background-color:#33FF66; left:300px; top:0;}#relative3{height:100px;width:200px; position:relative;  background-color:#0033CC; left:0; top:0;}</style></head><body><div id="wrapper1"><p>Ut labore et dolore magna aliqua. Quis nostrud exercitation eu fugiat nulla pariatur. Cupidatat non proident, velit esse cillum dolore sunt in culpa. Sed do eiusmod tempor incididunt in reprehenderit in voluptate qui officia deserunt. Ut aliquip ex ea commodo consequat.</p><div id="absolute1">A positioned absolute element, using properties left:0; and top: 0;,  inside a element with no position relative will position itself to the outer most container with position relative, or if non found, to body ie viewing area of browser screen.</div></div><div id="wrapper2"><p>Ut labore et dolore magna aliqua. Quis nostrud exercitation eu fugiat nulla pariatur. Cupidatat non proident, velit esse cillum dolore sunt in culpa. Sed do eiusmod tempor incididunt in reprehenderit in voluptate qui officia deserunt. Ut aliquip ex ea commodo consequat.</p><div id="absolute2">Now! because the outer element is using position relative, the absolute element is restricted to this elements area, and places it self to top-left position of this element only.</div></div><div id="wrapper3"><p>Ut labore et dolore magna aliqua. Quis nostrud exercitation eu fugiat nulla pariatur. Cupidatat non proident, velit esse cillum dolore sunt in culpa. Sed do eiusmod tempor incididunt in reprehenderit in voluptate qui officia deserunt. Ut aliquip ex ea commodo consequat.</p><div id="absolute3"><div id="relative3">A relative element inside a positioned absolute element, will do what it normally does position itself relative to the element it is within.</div></div></div></body></html>

your example was very helpful, thanks.I need to make the following comment though. As mentioned, an absolute element inside a relative element is restricted by the latter.Nonetheless, the verb restricted seems to be partially true because by using negative values i can position the absolute element outside the relative(container) element.Restricted yes, but only to a degree, it seems that this verb cannot be taken literally.These are my thoughts in an attempt to understand css better-it may sound strange but is always in the context of better css comprehension.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...