调整窗口大小时重复背景图像（背景重复是不重复的）

Question

My background image is repeat even though in css I have background-repeat: no-repeat;

Why is this happening?

This happens when I resize my window.

I have a TV on background as video layer.

HTML:

<div class="tv">
   <video width="98%" height="78%" controls="controls">
          <source src="img/showreel.mp4" type="video/mp4">
   </video>
</div>

CSS:

.tv{
  text-align: center;
  position:relative;
  background-repeat: no-repeat;
  background: url(img/tv.png) center center;
  background-size: 100%;
  height: 650px;
  width: 100%;
}

.showreel-video{
  position:relative;
  margin-top: -40px;
}

Answer 1

Your background-repeat: no-repeat; instruction is currently being overridden by the background:...; attribute because the latter also accepts a repeat/no-repeat instruction and is placed after .

So, you must either add no-repeat to your background attribute like this:

background: url(http://lorempixel.com/400/200/) center center no-repeat;

or move background-repeat: no-repeat; after the background instruction.

Answer 2

Just remove background-repeat and set background something like the following:

 background: url(http://lorempixel.com/400/200/) center center no-repeat;

Demo: http://jsbin.com/cacofotaqo/1/

Answer 3

In your css the background-repeat is being overwritten by the defaults for your background declaration as CSS processes rules from top to bottom. If you switch background-repeat and background then it will work:

background: url(img/tv.png) center center;
background-repeat: no-repeat;
background-size: 100%;