Jump to content
misselka

Background Image in Container Requires Float Left (Need Work Around to Center)

Recommended Posts

Hello. I've created a page that has a grey body and a background image within the container in the body. The container will not show the background image when centered. I read up on this online and found that if I float the container to the left, the background image shows up. Sure enough, it worked, but I want my container centered. Does anyone have a work around for this? Here is the page http://aphoniastudios.com/TestSite/t3/ and here is the css: @charset "UTF-8";/* CSS Document */ html {height:100%}body {background: #CCC;width: 95%;height: 95%;}a:link {color:#FFF; text-decoration:none;}a:visited {color:#FFF; text-decoration:none;}a:hover {color:#FFF; text-decoration:underline;}a:active {color:#e22426; text-decoration:none;}#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/background1.jpg);img {max-width: 100%;}background-size: 100%;background-repeat:no-repeat }#column1 {float: left;position: relative;width: 230px;height: 100%;max-height:688px;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: #e22426;padding: 8px;box-shadow:3px 3px 5px 0px #333333;margin-right: 5px;color: #FFF;position:absolute;bottom:0;}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: 52px;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: 52px;margin-bottom: 0px;position: relative;z-index: 1;width: 285px;height: 60%;padding-top: 30px;padding-right: 20px;padding-bottom: 20px;padding-left: 150px;.aboutlinks {word-spacing: 2px;color: #e22426;}#column4 {float: left;position: relative;left:-100px;width: 20%;height:100%,padding: 0px;}

Share this post


Link to post
Share on other sites

Using background-position: center; will centre the image, but the other element will be to the left, to keep the other element in right position to background image, make the background image container the same with as image, and use margin: 1px auto;.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...