html – How to stop repeating images in CSS?

html – How to stop repeating images in CSS?

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>

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

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

Good luck!

html – How to stop repeating images in CSS?

Youll 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

Leave a Reply

Your email address will not be published.