background repeat but only have it on the bottom half

Question

consider the situation below:

section {
  height: 1200px;
  background: url('https://pngimg.com/uploads/sun/sun_PNG13449.png'), blue;
}

<section>
  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc
</section>

I want to have it only on the bottom section, not the entire section. I dont think background position will work because it's repeat default.

Upon posting these are the "similar" questions:

How to align content of a div to the bottom

this isn't related to bg images and neither are these

Make body have 100% of the browser height

How can I position my div at the bottom of its container?

and then

Stretch and scale a CSS image in the background - with CSS only

but its not relevant either.

is it possible to do a background repeat on a particular section within an element or does it need it's own div?

score 1 · Answer 1 · answered Nov 30 '21 at 21:41

repeat-x and place it at bottom

section {
  height: 1200px;
  background: 
    url('https://pngimg.com/uploads/sun/sun_PNG13449.png') bottom repeat-x
    blue;
}

<section>
  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc  content etc
</section>

background repeat but only have it on the bottom half

1 Answers1