CODEWITHSUNDEEP
htmlcssimagebackground-position
Lokasa Mawati
Lokasa Mawati

Reputation: 481

How to use background-position and background-size in CSS but also anchor an image at a certain point

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.

Upvotes: -1

Views: 763

Answers (1)

Matteo Pagani
Matteo Pagani

Reputation: 545

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;
}

Upvotes: 0

Related Questions