CODEWITHSUNDEEP
htmlcss
Sylvia585
Sylvia585

Reputation: 301

Why will my background image not repeat?

What would cause the background image to not repeat even though I have repeat-x set for it? I need these TV's to go span the width of my x axis and I just cant figure it out. 

#footer{
    clear: both;
    height: 50px;
    padding-top: 15px;
    background-color: black;
    color: white;
    text-align: center;
}

#tvs{
   background-image: url(tvs-627x100.png);
    height: 100px;
    width: 627px;
    background-repeat: repeat-x;}

<div id="footer">
Stop watching TV and write some code!
            </div>

<div id="tvs">
            </div>

Where am I going wrong here? Here is my jsfiddle too...

https://jsfiddle.net/dubh09mh/#&togetherjs=pxUyFRivNn

Upvotes: 0

Views: 74

Answers (3)

samurai_jane
samurai_jane

Reputation: 835

Add this to your code background-size: contain;

Here is the fiddle.

Upvotes: 0

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

Try this:

#tvs{
   background: transparent url(https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg) repeat-x left center;
    height: 100px;
    width: 100%;
 }

Upvotes: 1

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167172

Use the repeat this way:

#tvs {
  background: url(https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg) repeat-x left center;
  height: 100px;
  width: 627px;
  background-repeat: repeat-x;
}

You need to specify an initial position too.

Fiddle: https://jsfiddle.net/dubh09mh/2/

Upvotes: 0

Related Questions