How to repeat an image but only horizontally?

Question

I've got an image that I want to display as it does on the x-axis but I don't want the repeating property on the y-axis:

在此输入图像描述

The I'd like the image to be displayed not as the background since I want another image as the background image. Is that possible and if yes, how?

My CSS and HTML are:

BODY {background-image: url(/welcome/static/images/register_top2.png); background-position: center top; repeat-x; no repeat-y }
#content {
  width: 700px ;
  margin: 180  auto;

}
#content-container {
  width: 700px ;
  margin-left: 180px;  
}
#image-logo {
  float: right;
}
.has_errors { border: 1px solid #ff0000 }
.errors {color: #ff0000;}

      <!DOCTYPE hml>
                        <html>
                                <head>  <link rel="stylesheet" href="/welcome/static/css/register.css"/>

                                <STYLE TYPE="text/css">



</STYLE> 


                                        <title>{% trans %}Register new distributor{% endtrans %}</title>      <script type="text/javascript" src="/welcome/static/js/jquery-1.7.1.js"></script>

        <script type="text/javascript" src="/welcome/static/js/jquery.popupWindow.js"></script>
                                </head>
                                <body>  

<div id="content"><img src="/welcome/static/images/reg-reg3.gif">
  <div id="content-container">







                                <form action="{{action}}" method="post">

                                               <table><tr><td>

                                                 <label>{% trans %}Soc security number{% endtrans %}</label></td><td>{{ form.soc_sec(size='10', maxlength='10')}}({% trans %}YYMMDDXXXX{% endtrans %})</td></tr>

                                                {% if form.soc_sec.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.soc_sec.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

                                                <tr><td>

 <label for="start">{% trans %}Your sponsor's ID{% endtrans %}</label></td><td>

                         <input id="log1" {% if form.sponsor_id.errors %}class="has_errors "{% endif %} maxlength="3" name="sponsor_id-log1" size="3" type="text" value="{% if form.sponsor_id.log1.data %}{{form.sponsor_id.log1.data}}{% endif %}" />

                       <input id="log2" {% if form.sponsor_id.errors %}class="has_errors "{% endif %} maxlength="3" name="sponsor_id-log2" size="3" type="text" value="{% if form.sponsor_id.log2.data %}{{form.sponsor_id.log2.data}}{% endif %}" />
                        <input id="log3" {% if form.sponsor_id.errors %}class="has_errors "{% endif %} maxlength="3" name="sponsor_id-log3" size="3" type="text" value="{% if form.sponsor_id.log3.data %}{{form.sponsor_id.log3.data}}{% endif %}" />
               <input id="log4" {% if form.sponsor_id.errors %}class="has_errors "{% endif %} maxlength="3" name="sponsor_id-log4" size="3" type="text" value="{% if form.sponsor_id.log4.data %}{{form.sponsor_id.log4.data}}{% endif %}" />

               (<a class="open_dialog" href="/static/sponsor-id.html">{% trans %}What is a sponsor ID{% endtrans %}?</a>)</td><td></tr>


{% if form.sponsor_id.log1.errors %}


<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.sponsor_id.log1.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

<tr><td>
                                                <label>Email</label></td><td> {{ form.email(size='22', maxlength='60')}}  </td></tr>

{% if form.email.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.email.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}



<tr><td>
 <label>{% trans %}First name{% endtrans %}</label></td><td>{{ form.firstname(size='22', maxlength='60')}}</td></tr>

{% if form.firstname.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.firstname.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

<tr><td>
 <label>{% trans %}Last name{% endtrans %}</label></td><td>{{ form.lastname(size='22', maxlength='60')}}</td></tr>

{% if form.lastname.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.lastname.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

<tr>
 <td>
 <label>{% trans %}Address{% endtrans %}</label></td><td>{{ form.address(size='22', maxlength='60')}}</td></tr>

{% if form.address.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.address.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

<tr><td>
<label>{% trans %}Zip code{% endtrans %}</label></td><td>{{ form.zipcode(size='22', maxlength='60')}}</td></tr>

{% if form.zipcode.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.zipcode.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

<tr><td>
<label>{% trans %}City{% endtrans %}</label></td><td>{{ form.city(size='22', maxlength='60')}}</td></tr>

{% if form.city.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.city.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

<tr><td>
<label>{% trans %}Phone{% endtrans %}</label></td><td>{{ form.phone(size='22', maxlength='60')}}</td></tr>

{% if form.phone.errors %}<tr><td></td><td> <div class="red">
        <ul class="errors">{% for error in form.phone.errors %}<li>{{ error }}</li>{% endfor %}</ul></div></td></tr>
    {% endif %}

</table>


                                        <button>{% trans %}Next{% endtrans %}</button>
                                </form> </div>
 <img id="image-logo" src="/welcome/static/images/snabbreg002.jpg" />

</div><script type="text/javascript"> 
$('.open_dialog').popupWindow({ 
height:500, 
width:700, 
top:325, 
left:400 
}); 
</script>
</body>
                        </html>

Answer 1

Write like this:

body {
  background-image: url(/welcome/static/images/register_top2.png); 
  background-position: center top;
  background-repeat:repeat-x; 
}

OR you can write like this also:

body {
      background: url(/welcome/static/images/register_top2.png) center top repeat-x; 
    }

Answer 2

background: #FFF url('/welcome/static/images/register_top2.png') fixed repeat-x center top;

Answer 3

To repeat a background image horizontally only, use the css rule

background-repeat: repeat-x;

Only the background can be repeated using css so if you want two backgrounds, you can apply one background to the body and an horizontal background to the div#content for instance.

DEMO

You can also use CSS3 to set multiple background images on the same container. The syntax is very easy, simply use comma-separated properties for the background css rules. The first image is the top image:

BODY {
    background-image: url(banner.jpg), url(background.gif);
    background-position: center top; 
    background-repeat: repeat-x, repeat;
}

In the above example, the image "banner.jpg" will be repeated only horizontally and be on top, the image "background.gif" will be repeated throughout the page underneath the horizontal banner.

DEMO

How to repeat an image but only horizontally?

Question

3 answers

solution1
10 ACCPTED 2012-02-27 09:29:07

solution2
3 2012-02-27 09:31:18

solution3
3 2012-02-27 09:31:19

How to repeat an image but only horizontally?

Question

3 answers

solution1 10 ACCPTED 2012-02-27 09:29:07

solution2 3 2012-02-27 09:31:18

solution3 3 2012-02-27 09:31:19

solution1
10 ACCPTED 2012-02-27 09:29:07

solution2
3 2012-02-27 09:31:18

solution3
3 2012-02-27 09:31:19