Joël Zwaan Joël Zwaan - 1 year ago 98
CSS Question

Aligning background-image (:relative) to right

On this website I am working on (, 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 Source

Add this to your CSS:


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


enter image description here

Fore more info, check this

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download