CODEWITHSUNDEEP
css
grizzleKat456
grizzleKat456

Reputation: 127

CSS moving image URL up

I set an image using URL in CSS like so:

.main-header {
background-color: rgba(0,0,0,.6);
background-image: url("images/store/concert.jpg");
background-blend-mode: multiply;
background-size: cover;
padding-bottom: 30px;
}

I am trying to move the image up (the top of the image is showing, I want the middle part to show). How can this be done?

Upvotes: 1

Views: 325

Answers (2)

Mech
Mech

Reputation: 4015

background-position:center is what you are looking for:

.main-header {
  background-color: rgba(0, 0, 0, .6);
  background-image: url("https://res.cloudinary.com/fleurop/cmsimages2/content/newsletter/alles-ueber-blumen/valentinstag-rosenblaetter-header.jpg");
  background-blend-mode: multiply;
  background-size: cover;
  padding-bottom: 30px;
  background-position: center;
}
<div class="main-header">
  <div>

Upvotes: 1

Noa
Noa

Reputation: 1216

try this

.main-header {
background-color: rgba(0,0,0,.6);
background-image: url("images/store/concert.jpg");
background-blend-mode: multiply;
background-size: cover;
padding-bottom: 30px;
background-repeat: no-repeat;
background-position: center;
}

Upvotes: 0

Related Questions