-1

I have a layout that looks like this, from using background-position: center and background-size: cover:

enter image description here

The original image is from here:

Obama

I would like for the first example to look more like this:

enter image description here

To do this I am imagining putting an anchor point on the image and somehow telling CSS to use this anchor point.

background-position: x y;

Wondering how I could accomplish this.

I don't want to crop the image, as when the screen is resized, or on mobile for example, it will show more of the image. I want the image to be as is. I also don't want the image squished, I want it to work like background-size: cover works roughly, but with a custom anchor point.

Lokasa Mawati
  • 441
  • 5
  • 15
  • What are the dimensions of the element that is supposed to get the background-image ? – Hicka May 04 '19 at 18:16
  • The dimensions are arbitrary, it could be in this case `flex: 1`. [This](https://stackoverflow.com/questions/55979628/how-to-layout-image-so-it-is-to-left-of-ad-space-and-yet-centered-using-flexbox) is the layout roughly. – Lokasa Mawati May 04 '19 at 18:17
  • Questions seeking help must include _the shortest code necessary to **reproduce it in the question itself**_. See: How to create a [mcve]. – Asons May 04 '19 at 18:20
  • add `background-position:top center` – Temani Afif May 04 '19 at 19:24

1 Answers1

0
div.relative {
   background: url(mountain.jpg);
   background-repeat: no-repeat;
   background-size: auto;
   position: relative
   top: //what you want  e.g. 20px
   left: //e.g. 40px;
   bottom: //e.g. 80px;
   right: //e.g. 0px;
}
Matteo Pagani
  • 545
  • 5
  • 14