1- (background-image) how to avoid repeating the image?

2- How to adapt the background-image to the whole page?


W3Schools has some nice resources for html and CSS if you’re looking for something specific. It is good experience to try and find something by yourself first, because then you learn a lot more than just the answer to specific questions.

  1. Background Repeat:
    The “background-repeat” property controls how the background image is repeated. If you don’t want it to repeat, you can set this property to “no-repeat”.

  2. Background Image Size:
    To control the size of the background image the “background-size” property has to be set.
    This can be done is several ways that have different results:
    2.1) contain: this stretches the image to the contained width, but height is the image height scaled.
    2.2) cover: This stretches the images out to fill the have height, but most of the time the scaled width is over the page id the height is too large.
    2.3) 100%, 100%: This sets the width and height respectively and can be changed. But you can remove no-repeat to repeat this image from the top to the bottom of the container/page.

Additionally you can add the background-attachment property and set it to “fixed”, this will result in the background image not moving when scrolling. This will help if you don’t wan the image to repeat vertically.

To get your desired effect, it will depend on the size of you image as well as it’s proportions.