CODEWITHSUNDEEP
htmlcssbackground-image
chionae
chionae

Reputation: 41

How to move an image within the header?

Header screen:

Header screen

I'd like to move it higher and to the left a little bit, but transform option moves a whole block. How can I deal with it?

CSS 

.header {

    height: 100vh;
    width: 96%;
    background-size: cover;
    background-position: top;
    position: relative;
    display: inline-block;
    text-align: center;
    margin-top: 2rem;
    margin-left: 2rem;

    &__background {
        background-image: linear-gradient(
            to right bottom,
            rgba($color-main-green, 0.3),
            rgba($color-main-purple, 0.5)),
            url(../resources/img-cropped/header.jpg);



    }

   }

Upvotes: 2

Views: 3238

Answers (2)

Vrijraj Singh
Vrijraj Singh

Reputation: 95

Use background-position, background-size and background-repeat CSS property to adjust the image.

Upvotes: 1

Tim Gerhard
Tim Gerhard

Reputation: 3607

Use the background-position property to move the background image. maybe use background-position: top left and if this does not suit the desired results you can also add px values instead of top, left, right and bottom.

Try to experiment until you achieve the desired result.

For example: This piece of code would make the image positioned 30px from the left:

background-position: left 30px center;

The center is for the y value of the image. You could also add px values to this one.

Upvotes: 1

Related Questions