CSS moving image URL up

Question

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?

@RohitTagadiya This doesn't seem to work. should it look like this: `background-position: (50%, 50%);` Also what do the percentages mean here? — grizzleKat456, Sep 23 '20 at 03:42

Mech · Accepted Answer · 2020-09-23T19:30:19.150

1

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>

edited Sep 23 '20 at 19:30

answered Sep 23 '20 at 03:42

Mech

3,611
1
12
25

Thanks this works. How about if you wanted something a little more specific? Say you wanted it just off-center..? – grizzleKat456 Sep 23 '20 at 03:44
You could change it to something like `background-position: 50% 50%;` or `background-position: 30px 90px;` in that case. – Mech Sep 23 '20 at 03:47
what do the percentages/numbers here mean? – grizzleKat456 Sep 23 '20 at 03:48
Well, in your case you would want something like `background-position: 10px 50%;` to move it over 10px and still be the middle (50%) section of the image. – Mech Sep 23 '20 at 03:50
Ok thanks for your help. Also, when would you include a picture like this (in css) vs with html? Is there a benefit/specific time to use one way or the other? Or is it all personal preference more or less – grizzleKat456 Sep 23 '20 at 03:57
https://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image#:~:text=decision%20to%20me.-,If%20the%20image%20is%20part%20of%20the%20content%20such%20as,image%2Dreplacement%20of%20text%20eg. – Mech Sep 23 '20 at 04:08

score 0 · Answer 2 · answered Sep 23 '20 at 03:42

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

CSS moving image URL up

2 Answers2