notsuresbarros Posted January 29, 2009 Report Share Posted January 29, 2009 Hi, I'm pretty new to all of this and I'm just looking for some CSS code to set up a background image? Something that will not repeat, but will just take up the whole page? Thanks Quote Link to comment Share on other sites More sharing options...
falkencreative Posted January 29, 2009 Report Share Posted January 29, 2009 Assuming you are looking for a background image on your body tag, you could use something like this: body { background: url(linktoimage.jpg) 0 0 no-repeat; } The first part defines the link to your background image, the next two numbers define where that image is placed (top left corner, if you use 0 0) and finally if that image repeats (repeat-x, repeat-y, no-repeat) Quote Link to comment Share on other sites More sharing options...
Wickham Posted January 29, 2009 Report Share Posted January 29, 2009 Hi,Something that will not repeat, but will just take up the whole page? It needs to be big enough to cover the whole page, and remember that some people use resolutions of 1920*1200. An alternative is to position a large background image centrally so that in smaller resolutions both sides get cut off equally as that usually looks better than if the right side loses a lot and the left loses none, or if your image isn't big enough for large resolutions it will center with space at the sides. See http://www.w3schools.com/css/pr_background-position.asp Falkencreative gave yo the short method of coding with all styles inside the background. w3schools gives each separately using background-image, background-position, etc. Quote Link to comment Share on other sites More sharing options...
notsuresbarros Posted February 4, 2009 Author Report Share Posted February 4, 2009 Thanks! But why does only the top left corner of the image show up on the website? This is the code I used: background-image: url(images/sky.jpg); background-repeat: no-repeat; background-attachment:fixed; background-position: central central } Quote Link to comment Share on other sites More sharing options...
JBall Posted February 4, 2009 Report Share Posted February 4, 2009 Is your image too big? ...central central? Maybe you meant center center. Would it be possible to post a link to your test site or post the full code here? It would make things a lot easier to diagnose. Quote Link to comment Share on other sites More sharing options...
notsuresbarros Posted February 5, 2009 Author Report Share Posted February 5, 2009 Is this enough? /* Generic Selectors */ body { font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; color: #2C7AB0; background-color: #B3EA10; background-image: url(images/sky.jpg); background-repeat: no-repeat; background-attachment:fixed; background-position: center center } width: 20%; } li { list-style-type: disc; line-height: 150%; list-style-image: url(images/arrowSmall.gif); } h1 { font-family: Tempus Sans ITC; font-size: 50px; font-weight: bold; color: #2C7AB0; border-bottom: 2px solid #2C7AB0; } h2 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 20px; font-weight: bold; color: #2C7AB0; border-bottom: 2px solid #2C7AB0; } h3 { font-family: Georgia, "Times New Roman", Times, serif; font-size: 40px; font-weight: bold; color: #2C7AB0; } /**************** Pseudo classes ****************/ a:link { color: #2C7AB0; text-decoration: underline; font-weight: bold; } li a:link { color: #2C7AB0; text-decoration: none; font-weight: bold; } a:visited { color: #2C7AB0; text-decoration: none; font-weight: bold; } li a:visited { color: #2C7AB0; text-decoration: none; font-weight: bold; } a:hover { color: #F66D08; padding-bottom: 0px; font-weight: bold; text-decoration: none; } li a:hover { display: block; color: #F66D08; padding-bottom: 0px; font-weight: bold; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #2C7AB0; } a:active { color: #F66D08; font-weight: bold; } /************************* ID's *************************/ #navigation { position: absolute; z-index: 10; width: 210px; height: 900px; margin-left: 40px; margin-top: 400px; border-right: 1px solid #2C7AB0; font-weight: normal; } #centerDoc { position: absolute; z-index: 15; padding: 0 0 20px 20px; /*top right bottom left*/ margin-top: 50px; margin-left: 265px; } #LogoPic { position: absolute; z-index: 10; width: 210px; height: 900px; margin: 0; font-weight: normal; } Quote Link to comment Share on other sites More sharing options...
Wickham Posted February 5, 2009 Report Share Posted February 5, 2009 (edited) The code you have now:- background-color: #B3EA10; background-image: url(images/sky.jpg); background-repeat: no-repeat; background-attachment:fixed; background-position: center center looks fine and should show the background image centered horizontally and vertically and not stuck to the top left corner, and with the background-color around the sides. Give us an online link if it doesn't. If you don't want the image in the center vertically use top center instead of center center. Edited February 5, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.