Jump to content

Background image


notsuresbarros

Recommended Posts

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)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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;

 

}

Link to comment
Share on other sites

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 by Wickham
Link to comment
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.
Note: Your post will require moderator approval before it will be visible.

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...