How to stop repeating images in CSS?

Question

How to stop repeating images in CSS? Please help,

Why when I'm entering an image in CSS, the image is repeating?

CSS code

header{
  background-image: url(originalMattress.jpg);
  text-align: center;
  padding: 5px;
  height: 450px; 
}

HTML Code

<header>
    <p class="top-liner">over 35,000 5* reviews</p>
    <h1>This is what award-wining comfrom feels like</h1>
    <a href="#" class="main-button">Shop for mattresses </a>
    <p class="footer-text">According to capers global onsite customer reviews</p>
</header>

Does this answer your question? [Repeating CSS background images without stretching](https://stackoverflow.com/questions/48978553/repeating-css-background-images-without-stretching) — Omri Attiya, Sep 05 '20 at 15:16

score 2 · Answer 1 · edited Sep 05 '20 at 15:44

You'll need to set the background-repeat property.

To prevent the background from repeated you can set background-repeat to no-repeat.

CSS code

header{
  background-image: url(originalMattress.jpg);
  background-repeat: no-repeat;
  text-align: center;
  padding: 5px;
  height: 450px; 
}

Resources: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_background-repeat_no-repeat

score 1 · Answer 2 · edited Sep 05 '20 at 19:33

Set background-size property to cover this will make your background to fit in its container and background-repeat to no-repeat this will prevent your background from repeating the following is an

Example

header{
    background-image: url(originalMattress.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    padding: 5px;
    height: 450px; 
}

<header>
    <p class="top-liner">over 35,000 5* reviews</p>
    <h1>This is what award-wining comfrom feels like</h1>
    <a href="#" class="main-button">Shop for mattresses </a>
    <p class="footer-text">According to caspers global onsite customer reviews</p>
</header>

score 0 · Answer 3 · answered Sep 05 '20 at 15:16

The CSS background-repeat is what you're looking for. If you want the background image not to repeat at all, use background-repeat: no-repeat;.

There are also other options, so I'd recommend checking out The MDN documentation about the background-repeat property

Good luck!

How to stop repeating images in CSS?

3 Answers3

Example