error77
asked on
CSS Background Image Positioning
Hi all,
Is it possible to position a background image to TOP (Absolute position) and RIGHT to Relative?
OR use top:-6px right ?
Thanks
Is it possible to position a background image to TOP (Absolute position) and RIGHT to Relative?
OR use top:-6px right ?
Thanks
yes, off course
background-position:right top;
http://www.w3schools.com/css/pr_background-position.asp
background-position:right top;
http://www.w3schools.com/css/pr_background-position.asp
ASKER
I'm trying this code below but unless the div is wrapper around other div's the background image won't show.
Any ideas why please?
Here are my tests ... see the text comments:
attached below
Any ideas why please?
Here are my tests ... see the text comments:
attached below
<div style="background: url(bg-image.png) no-repeat; position: absolute; right: 0; top: 37px;">This does appear but no image</div>
<div style="background: url(bg-image.png) no-repeat; position: absolute; right: 0; top: 37px;">
<div>Some content here and the image DOES appear why?</div>
</div>
where have you used the background-position property?
ASKER
Both positions are right ... I need to TOP example to work but only the Bottom example works.
ASKER
You can see what I'm trying to do here:
https://www.experts-exchange.com/questions/26939904/Background-Image-Positioning-CSS.html
Sample image attached
https://www.experts-exchange.com/questions/26939904/Background-Image-Positioning-CSS.html
Sample image attached
but why can't you just use the position-background property? it will make your life very simple
ASKER
because position top right returns relative and in that case the top would have to be -6px
Know what I mean?
Know what I mean?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Kind of working but seems to be on top of my other div's .... I've added z-index:0; to it but no effect :o/
please share your code or better the live internet link.
ASKER
Here is the code ... cannot share a live link as it's not live.
<div id="header">
<div id="logo"></div>
</div>
<div style="background: url(bg-image.png) no-repeat; position: absolute; right: 0; top: 37px; width:544px; height:526px; z-index:0;"></div>
<div id="main">
<br />
<div id="content">
<h1>title</h1>
Content Here
</div>
</div>
this is not helping. Please share the screenshot
If there is anything other then these let us know,
Hope this helps