CODEWITHSUNDEEP
htmlcss
0xtimur
0xtimur

Reputation: 1293

background image not repeating on absolute element

The background image (the topography) is not repeating. It stops above the "Terra management technique" (look at pic). I want to cover the entire element (accordion), which is the element right above the footer.

webpage

HTML

<div class="accordion">
  <span class"topography"><img src="/img/bg/topo.svg"/></span>
  .....
</div>

CSS

.accordion {
  position: relative;
}

.topography {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
pointer-events: none;
background-repeat: repeat;
}

.topography img{
height: 100%;
background-repeat: repeat;
}

Upvotes: 0

Views: 475

Answers (3)

Spitzbueb
Spitzbueb

Reputation: 5871

You remove the image in your html and set the background-image property in your CSS file.

Like this:

.topography {
  background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1EwO-OcUp2ZTpjubUsiZPLm8RAej4XQLnKs5s3Ry5kAd8IEVT");
  /*relative link (from your css file location) to your background image*/
  background-repeat: repeat;
}
<div class="topography">
  <p>What ever here is</p>
  <p>What ever here is 2</p>
  <p>What ever here is 3</p>
</div>

Upvotes: 1

Muthu Kumaran
Muthu Kumaran

Reputation: 17910

You can't do background-repeat for tag.

instead of <img> use CSS to load image using background-image or use background in single line to merge all your background property

.topography {
   background: url('/img/bg/topo.svg') repeat;
}

Upvotes: 1

Johannes
Johannes

Reputation: 67748

You should use the image as a background-image then, not as an img tag:

<div class="accordion">
  <span class"topography"></span>
  .....
</div>

CSS

.accordion {
  position: relative;
}

.topography {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
pointer-events: none;
background-image: url("/img/bg/topo.svg");
background-repeat: repeat;
}

Upvotes: 1

Related Questions