misselka Posted October 9, 2012 Share Posted October 9, 2012 I have run into a problem coding for a background image to be positioned absolutely to the top right of my column3 div container. I've attempted to give the image the following properties: position:absolute; top:0; right:0However, the image shows up, on the top left instead of top right. That said, the image is in a div that is floated left and has a z-index and therefore a position of relative. This is the only thing that I can figure to be causing the problem. If you think this is the problem, is there any way around it? If you don't think this is the problem, what might it be. On another note, something I hope you might help me understand is why the background-repeat:no-repeat; only works outside of the img style. I would expect it to work inside the img style, but instead it repeats. Thanks in advance for your help. Here is a link to the page http://aphoniastudio...2/about_ss.html and here is the css: @charset "UTF-8";/* CSS Document */ html {height:100%}body {background: #CCC;width: 95%;height: 95%;overflow: hidden;}a:link {color:#FFF; text-decoration:none;}a:visited {color:#FFF; text-decoration:none;}a:hover {color:#FFF; text-decoration:underline;}a:active {color:#FFF; text-decoration:none;}ul:active {background-color:#E1231E;}ul:visited {background-color:#E1231E;}.aboutlinks a:visited {color:#E1231E;}.aboutlinks {color:#E1231E; word-spacing:12px;}#container {float: left;font-family: Helvetica, Arial, sans-serif;font-size: .7em;text-align: left;height: 100%;width: 100%;padding: 0px;margin: 1px 2.1%;background-image: url(Images/conference1_ss.png);img {max-width: 100%;}background-size: 100%;background-repeat:no-repeat }#column1 {float: left;position: relative;width: 230px;height: 100%;max-height:700px;margin: 0px .5% 0px 7%;color: #FFF;font-size: .9em;overflow: hidden;}#column1 #header {padding:8px 4px;}#p {font-size:13px;position:absolute;bottom:100px;line-height: 17px;}#column1 #footer {background-color: #E1231E;padding: 8px;box-shadow:0px 3px 5px 0px #333333;margin-right: 5px;color: #FFF;position:absolute;bottom:0;}.stretch {max-width:100%; max-height:100%;}h1 {display:none}h3 {display:none}#column2 {float: left;width: 10%;height: 100%;color:#4D4D4D;font-size: .65em;font-weight:900;}nav {position: absolute;z-index: 2;background-color: #999;width: 10%;height: 100px;margin-top: 54px;padding: 2px 0px 5px 2px;box-shadow:3px 3px 5px 0px #333333;color: #FFF;}nav ul {display:block;list-style-type: none;margin: 10px;padding: 0px;line-height:65%;}#column3{float:left;margin-top: 54px;margin-bottom: 0px;background-color:#FFF;position: relative;z-index: 1;width: 30%;height: 80%;padding-top: 30px;padding-right: 2.8%;padding-bottom: 20px;padding-left: 5%;box-shadow:3px 3px 5px 0px #333333;overflow: auto;background-image: url(Images/triangle.png);background-repeat:no-repeat;img {position: absolute; right:0; top:0;max-width: 100%;}.aboutlinks {word-spacing: 2px;}#column4 {float: right;width: 20%;height:100%,padding: 0px;}#container #column2 nav ul li {} Link to comment Share on other sites More sharing options...
niche Posted October 10, 2012 Share Posted October 10, 2012 What are your developer tools telling you? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 10, 2012 Share Posted October 10, 2012 ??? IF it is a background image, wouldn't it be better to use background-position: right top; 1 Link to comment Share on other sites More sharing options...
misselka Posted October 10, 2012 Author Share Posted October 10, 2012 Thank you both for your responses. I'm a newbie and the background-position: right top; worked perfectly. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now