Question

我正在重写一个网站，我已经插入了一个背景。背景图像正在重复。我已经尝试了各种方法来设置repeat = n而没有任何运气。

这是当前的html部分：

<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    <title>Site down | Maintenance</title>
    <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
    <style type='text/css'>
        html,
        body {
            padding: 0;
            border: 0
        }

        .Header_image {
            padding- left: 20px
        }

        h1 {
            font-family: "verdana";
            padding: 0px;
            margin: 0px;
            font- size: 16pt;
            color: #D5261e
        }

        h3 {
            font-family: "verdana";
            padding: 0px;
            margin: 1px;
            font-size: 11pt;
        }

        p {
            font-family: "verdana";
            font-size: 13;
        }

        div.wide_rhn {
            padding-bottom: 17px
        }

        div.pg_three_col_border {
            BORDER-right: #e8e8e8 1px solid;
            BORDER-left: #e8e8e8 1px solid;
            background-color: #FFFFFF;
            PADDING-TOP: 11px;
            PADDING- LEFT: 17px;
            padding-bottom: 11px;
            font-family: arial;
            font-size: 75%;
            width: 763px;
            ^width: 782px
        }

        table.HP_table_header {
            position: relative;
            z-index: 200;
            padding- bottom: 10px;
            padding-top: 10px;
            *padding-bottom: 12px
        }

        td.HP_mainmenu {
            border: #878787 1px solid
        }

        table.HP_Image_table {
            MARGIN-LEFT: 124px;
            MARGIN-TOP: 1000px
        }
    </style>
</head>

<body background="man-with-no-shoes.jpg">

    <table class='HP_table_header' width='960' align='center' border='0' cellpadding='0' cellspacing='0'>
        <tbody>
            <tr>
                <td class='Header_image' width='189' align='left' height='74'>
                    <img src='images/test_logo.jpg' border='0' />
                </td>
            </tr>
        </tbody>
    </table>
    <table class='bg_body' width='1006' align='center' border='0' cellpadding='0' cellspacing='0' style='height: 500px;'>
        <tbody>
            <tr>
                <td valign='top'>
                    <table width='960' align='center' border='0' cellpadding='0' cellspacing='0'>
                        <tbody>
                            <tr>
                                <td valign='top' width='782' align='left'>
                                    <div id='WiderhPagetitlemain'>

Answer 1

尝试使用background-repeat：

https://www.w3schools.com/cssref/pr_background-repeat.asp

然后您可以使用：

background-repeat: no-repeat;

如果你的身体背景，你只需：

body {
    background-repeat: no-repeat;
}

这意味着 - 在<style type='text/css'>的代码中，您只需添加以下内容：

    body {
        background-repeat: no-repeat;
    }

此外，请注意，通常最好在CSS中而不是在HTML中设置背景图像，因为您可以更好地分离关注点：

Html负责内容和结构
Css负责视觉效果

您可以使用background-image属性在CSS中设置背景图像：

body {
   background-image: url("background.jpg");
}

话虽如此，将CSS移动到单独的文件而不是将所有内容都放在HTML中也是一个好主意 - 再次，分离更好。

然后，您可以像这样链接新文件：

<link rel="stylesheet" type="text/css" href="my-new-stylesheet.css">

Answer 2

.someCssSelector{
    background-repeat: no-repeat;
}

使用css添加背景。然后将属性设置为无重复。

Answer 3

在这里，伙计：

    <html xmlns='http://www.w3.org/1999/xhtml'>
    <head>
    <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
    <title>Site down | Maintenance</title>
    <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
    <style type='text/css'>html,body {padding:0;border:0}.Header_image {padding-
    left:20px}
    h1 {font-family:"verdana" ; padding:0px;margin:0px;font-
    size:16pt;color:#D5261e}
    h3 {font-family:"verdana" ; padding:0px;margin:1px;font-size:11pt;}
    p {font-family:"verdana" ; font-size:13;}
    div.wide_rhn {padding-bottom:17px}
    div.pg_three_col_border {BORDER-right: #e8e8e8 1px solid;BORDER-left: 
    #e8e8e8 1px solid;background-color:#FFFFFF;PADDING-TOP:11px;PADDING-
    LEFT:17px;padding-bottom:11px;font-family:arial;font-size:75%;width: 
    763px;^width: 782px}
    table.HP_table_header {position:relative;z-index:200;padding-
    bottom:10px;padding-top:10px;*padding-bottom:12px}
    td.HP_mainmenu {border:#878787 1px solid}
    table.HP_Image_table {MARGIN-LEFT:124px;MARGIN-TOP:1000px}





body {
    background-image: url(man-with-no-shoes.jpg);
    background-repeat: no-repeat;
    }
    </style>



    </head>
    <body>

    <table class='HP_table_header' width='960' align='center' border='0' 
    cellpadding='0'cellspacing='0'>
    <tbody>
    <tr>
    <td class='Header_image' width='189' align='left' height='74'><img 
    src='images/test_logo.jpg' border='0' /></td>
    </tr>
    </tbody>
    </table>
    <table class='bg_body' width='1006' align='center' border='0' 
    cellpadding='0' cellspacing='0'style='height: 500px;'>
    <tbody>
    <tr>
    <td valign='top'>
    <table width='960' align='center' border='0' cellpadding='0' 
    cellspacing='0'>
    <tbody>
    <tr>
    <td valign='top' width='782' align='left'>
    <div id='WiderhPagetitlemain'>

CSS - jpg图像重复

3 个答案: