CODEWITHSUNDEEP
htmlcss
azhpo
azhpo

Reputation: 802

Background-image repeating when resize window (background-repeat is no-repeat)

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;
}

Upvotes: 1

Views: 2050

Answers (3)

255kb - Mockoon
255kb - Mockoon

Reputation: 6974

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.

Upvotes: 8

Tim
Tim

Reputation: 326

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%;

Upvotes: 0

SaidbakR
SaidbakR

Reputation: 13544

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/

Upvotes: 2

Related Questions