CODEWITHSUNDEEP
css
bluemug
bluemug

Reputation: 21

Style not applying correctly to background image

I am a student and I'm having an issue with one of the video tutorials regarding using a background image.  I followed the code exactly as is in the video but it's not producing the same results.  It just keeps showing the image tiled throughout the whole web-page.  Any help would be appreciated.

<style type="text/css">
   body {
      background-image:url(goku.jpg);
      background-repeat:no-repeat;
      background-attachment: 50% 60px;
   }    
</style>

Upvotes: 1

Views: 35

Answers (1)

Johannes
Johannes

Reputation: 67778

Your background-attachment value is invalid, and you should add a background-sizesetting. In the snippet below I used cover to cover the whole screen, but you can also use other sizes. But then you should also add background-position

EDIT after comment: Well then just change to background-position: 50% 50%;. The image - if you don't use background-size will be displayed at its original size, and with that setting, be centered horizontally and vertically. If you don't like the vertical centering, change the second value to whatever you like, also in pixels, if you want.

html,
body {
  margin: 0;
  height: 100%;
}

body {
  background-image: url(https://placehold.it./240x180/fb4);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 50% 50%;
}
<div>Test</div>

Upvotes: 2

Related Questions