Jump to content

Background image not positioning properly


misselka

Recommended Posts

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

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
×
×
  • Create New...