FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Background Images

   Frihost Forum Index -> Webmaster and Internet -> Design Tips
 


burningjacks
i was thinking about some of the background images that i've seen on some websites. i was wondering if anyone new some ways to edit the background of your website.... i no that didnt explain it well so ill give an example Wink

Code:
 
<html>
<head>
<title>MY SITE</title>
</head>
<body background="kitten.jpg">

</body>
</html>


ok....now i have my background image of my pretty little kiddy. now its like repeating over and over again to fit the page...i dont want that. so how can i make it not repeat...or do other stuff to it like follow while i scroll and stuff?
Marston
Code:
<style type="text/css">
<!--
body{
background-color: #FFFFFF; /* So the Background is White */
background-image: url(path/to/your/image.jpg); /* The Image */
background-repeat: no-repeat; /* So the Image doesn't repeat */
background-attachment: fixed; /* So the Image stays in place while scrolling */
}
-->
</style>
Just drop this bit of code between the <head> and </head> tags, like this:
Code:
<html>
<head>
<title>MY SITE</title>
<style type="text/css">
<!--
body{
background-image: url(path/to/your/image.jpg); /* The Image */
background-repeat: no-repeat; /* So the Image doesn't repeat */
background-attachment: fixed; /* So the Image stays in place while scrolling */
}
-->
</style>
</head>
<body>

</body>
</html>
burningjacks
i new it had to be in a style sheet but i didnt no the code! thank you very much! Laughing
Marston
Wink No problem.
riv_
You can also use a shorthand and give all those commands in one line. You can also tell the browser WHERE to attach the image. You can attach a background to almost any element... I usually make a wrapper div, because, rather than defining it for the body... ANyways, the shorthand looks like this:
Code:
#wrapper{background: #000000 url("image_url") no-repeat fixed 50% 50%;}
/*This would make a background image appear centered on the page.*/

First you list the bg color (or transparent) in hex,
then the image url,
then the repeat (-x, -y, or no-),
then (OPTIONAL) attachment (fixed or scroll) (Default is scroll)
then position. THe first number is horizontal and the second vertical. It can be written as left/right, top/bottom; or as % (ie 50% 50% would be centered)
Code:
h1,h2,h3{background: transparent url("image_url") no-repeat left bottom;   
      padding-left: 10px;
}
/*This is how you would probably make a decorative image appear beside a heading.  (assuming the image was small enough that 10px padding was enough to clear it...)*/

Don't know if that was useful, but... Wink
dkbg
And since all of these tips aren't all that helpful if you want to further your knowledge of CSS and to help you understand why you should use these rules, you might want to try the CSS tutorial on w3schools. Try searching Google too, can't go wrong there.
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.