Joël Zwaan Joël Zwaan - 2 months ago 7
CSS Question

Aligning background-image (:relative) to right

On this website I am working on (www.adexreisen.de), there is a header background image that is styled with the following CSS:

.header {
position: relative;
min-height: 436px;
background: url("../img/holland-canal.jpg") no-repeat;
background-size: cover;
}


As it is now, when resizing the window and on lower resolutions, the image is aligned to the left and thus the right part of the picture gets cut off. The right side of the picture contains the bridge, which I want to be visible at all times.

Is it possible to position the background image in such a way that it is always aligned to the right, i.e. that the left part of the image is cut off when resizing to a smaller window?

Thank you!

Answer

Add this to your CSS:

.header{
    background-position:right;
}

as the div that have the header class is containing the background image

Output

enter image description here

Fore more info, check this

Comments