In this video, I am going to show you how to set an image as a background for your webpage. Here I have my html document and here, I have my web page open in my browser displaying only a few lines of text. Okay, the first thing I am going to do is to set an image as a background for my web page. So what I have to do is type:
body
{
background-image: url(‘lambo.jpg’)
}
And then I go to File and save the changes I made, go back to my web page, refresh it and here you can see my picture as the background for my webpage.
Another thing you can do is to have the image to only display in one side of the web page, for instance, the left side of the page. The way you can do that is by going in to your html document and type:
body
{
background-image: url(‘lambo.jpg’)
background-repeat: repeat-y;
}
Save the changes, go back to my page, refresh it and as you can see here, the image is showing up only on the left side of the page.
I can also have the image to display on top of the page. The way I do that is by going in to my html document and type:
body
{
background-image: url(‘lambo.jpg’)
background-repeat: repeat-x;
}
Save the changes, go back to my page, refresh it and here is my image displaying only on the top of my web page.
I can also stop my image from repeating itself on the web page and the way that I can do that is by:
body
{
background-image: url(‘lambo.jpg’)
background-repeat: no-repeat;
}
Once again, save the changes, go back to my page and here is my image displaying only once in my page.
Now as you can see here, when I scroll up and down, my image moves along with my text. There is a way to stop the image to scroll up and down and only have the piece of text to move up and down. The way you do that is by going into your html document again, and type:
body
{
background-image: url(‘lambo.jpg’)
background-repeat: repeat-y;
background-attachment: fixed;
}
Once again, go to file, save the changes. Go to my web page, refresh it and now as you can see here I am scrolling my text up and down and the image is not moving at all.
So that is it for now, I hope you like this little video. This is Franklin with fdvisions.com.
Transcription by:
Scribe4you Transcription Services