简体   繁体   中英

Set an image to body section only using CSS?

I have a site which is divided into header, footer and body. So I want to put a background image to body section only. How can I do it? I tried it with table tag but i was not able to finish it. I have a separate file for .css. I tried to use background property of table tag like this:

<table background="../images/logo.jpg">
    <tr>
        <td>
            <h2 align="center">About Us</h2>
        </td>
    </tr>

I also tried to over ride the style.css file's table property by setting an inline css by this:

<table STYLE="background-image:"../images/logo.jpg"">
  <tr>
    <td>
        <h2 align="center">About Us</h2>
    </td>
</tr>

It is not showing the desired result. In both the cases I can't see the image.

you can use

<body background="../images/logo.jpg">

or you can use CSS property background-image

body {
    background-image:url('../images/logo.jpg');
    background-position: left top;
    background-repeat: no-repeat;
}

I would suggest you to place the code below inside your html document.

<style type="text/css">
body {
    background-image: url('../images/logo.jpg');
    background-position: left top;
    background-repeat: no-repeat;
}
</style>

Right now u are putting a background image to your table but your question is pointing out to have it in the background of the webpage?

In any case. U have here an example of a background image:

JSFIDDLE example of table background COLOR

JSFIDDLE example of table background IMAGE

P.s.: Vote up if my anwswer helped! ^^

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM