Log in

View Full Version : HTML background image



Robi
06-04-2012, 10:24 PM
bit of a noob question but I googled a few things and couldn't find anything. basically, i'm making a website using html and i basically just want to use a background image.

the image i want is similar to the twitter setup (so the main content goes through the center) leaving two gaps either side.

does anyone know a shorter way to do this or how i would be able to do this via a background image?

merci

David
06-04-2012, 10:48 PM
body
{
background-image:url('imagelink');
}

http://www.w3schools.com/html/default.asp

Robi
07-04-2012, 10:56 AM
body
{
background-image:url('imagelink');
}

http://www.w3schools.com/html/default.asp

I think I tried this when I was in college the other day and the code didn't work.. it looks similar. I will try it out in a moment - thanks Dave

Kasabian
07-04-2012, 11:00 AM
<html>

<head>
<style type="text/css">
body
{
background-image:url('insertyourbackgroundlinkhere.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
</head>

<body>
main content of your website
</body>

</html>

Try that?

Plucked
07-04-2012, 01:40 PM
Try this my friend.
<!DOCTYPE html>
<html>
<head>
<title>Pension</title>
<meta charset="utf-8">
<style type="text/css">
body {
background: url('path/to/bg.png');
}
</style>
</head>
<body>
content here
</body>
</html>

Lee
07-04-2012, 01:48 PM
I do recommend http://w3schools.com if your starting out - it helped me a lot a few years ago and still does today!

Robi
07-04-2012, 03:51 PM
nothing is working :(

Pegle
08-04-2012, 10:44 AM
Have you made sure that you are leading to the image location correctly?

So if say you are working in folder Jim and your index.html/php file is in Jim and your image file is in imgs and called bg.png you have it set out like this:


<style type="text/css">
body {
background: url('/imgs/bg.png');
}
</style>


Hope that helps.

aidant
08-04-2012, 10:57 AM
<style type="text/css">
body
{
background: #000000 url(bg.png) fixed;
}
</style>

Want to hide these adverts? Register an account for free!