SamButch SamButch - 25 days ago 14
CSS Question

how do you display a certain aspect of an image without changing the dimentions of said image?

I have a header at the top of my page that is currently overlaying an image. the image is of a paralympian running and my webpage is about why amputees need to keep participating in sport.

I really want the image to show him running and of his prosthetic legs but when I insert the image it only shows the top half of him. I want to keep the image dimensions the same as they span across the whole page and look good but I basically just need the image to move upward without changing the dimensions.



.image1 {
background: url(https://images.unsplash.com/photo-1474014465286-9887839a5971?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=76a7a6bde1dd9e68d64b55ea5d907991) no-repeat;
position: relative;
bottom: 20px;
background-size: cover;
height: 350px;
padding-top: 20px;
}

<div class="image1">
<h1 class="headline"> how sport can help those suffering from lower-limb amputations </h1>
</div>




Answer

I guess what you are looking for is background-position property - see a demo below where I have positioned it to the center:

.image1 {
  background: url(https://images.unsplash.com/photo-1474014465286-9887839a5971?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=76a7a6bde1dd9e68d64b55ea5d907991) no-repeat;
  position: relative;
  bottom: 20px;
  background-size: cover;
  height: 350px;
  padding-top: 20px;
  background-position:center;
}
<div class="image1">
  <h1 class="headline"> how sport can help those suffering from lower-limb amputations </h1>
</div>

See this reference: w3-shcools

You can specify x and y positions too using percentages / pixels - see demo below:

.image1 {
  background: url(https://images.unsplash.com/photo-1474014465286-9887839a5971?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&s=76a7a6bde1dd9e68d64b55ea5d907991) no-repeat;
  position: relative;
  bottom: 20px;
  background-size: cover;
  height: 350px;
  padding-top: 20px;
  background-position: 25% 25%;
}
<div class="image1">
  <h1 class="headline"> how sport can help those suffering from lower-limb amputations </h1>
</div>

Comments