CODEWITHSUNDEEP
htmlcss
user2805313
user2805313

Reputation: 189

I have no repeat on background image, but how do I stretch out the tile?

Hi Please do not bash on me or give me negative vote because I really did spend the time and trying to find the answer. From what I searched, this is what I have. I am trying to make a background image as my body but when I put no repeat on, it just a single tile rather than it stretching. Ive been trying to find a code that will stretch it out but nothing is there. I tried youtube and tried looking on here

this is my code

body{
  background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRQoLWn_NOGkZO2BIkZyQud4OmegjxPMctGAZQAlKSf1DJvmsLyvA);
  background-repeat:no-repeat;
}

my HTML

<html>
    <body>

      <div id="container">
      </div>


    </body>
</html>

Upvotes: 0

Views: 1053

Answers (4)

Travis J
Travis J

Reputation: 82287

Embedded Demo
jsFiddle Demo with code

A better approach than using the body element would be to place a div that does this for you.

<head>
 <style>
  #background{
   background-image: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRQoLWn_NOGkZO2BIkZyQud4OmegjxPMctGAZQAlKSf1DJvmsLyvA);
   position:fixed;
   right:0;left:0;top:0;bottom:0;
   width:100%;
   height:100%;
  }
 </style>
</head>
<body>
 <div id="bacgrkound"></div>
</body>

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206189

http://jsbin.com/IJObemU/1/

body{
  background: url(image.jpg) no-repeat center center fixed;
  background-size: cover;
}

you can remove the fixed when you need to make your background cover bot not on the body element (if you're applying the background on some element that scrolls with the page).

Upvotes: 0

LifeQuery
LifeQuery

Reputation: 3282

body {
background: url((https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRQoLWn_NOGkZO2BIkZyQud4OmegjxPMctGAZQAlKSf1DJvmsLyvA) no-repeat;
background-repeat:no-repeat;
background-size:cover;
}

This will cover your screen.

Upvotes: 0

JSK NS
JSK NS

Reputation: 3446

This will work:

body {
  background: url((https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRQoLWn_NOGkZO2BIkZyQud4OmegjxPMctGAZQAlKSf1DJvmsLyvA) no-repeat;
  background-size: 100%;
}

Upvotes: 0

Related Questions