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 vide

Solution 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.

Solution 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/

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