Background image

[notsuresbarros]

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

[falkencreative]

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)

[Wickham]

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.

[notsuresbarros]

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

}

[JBall]

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.

[notsuresbarros]

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;

 

}

[Wickham]

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