Center page background image

Support
#1

Is it possible to center a resized image through backstrech without using margin? the problem is that the margin interferes with the smaller screen sizes. Below is the CSS I used:

.backstretch {
width: 1600px !important;
margin-left: 10.85em !important;
}

the background image should be 1600px wide and centered (not full width) to fit the web page layout. Currently without the margin the image is placed left.

thank you for your help.

#2

Hey @angelina.staub,

Please give us the URL of the page your working on so we could check the current setup and see if it’s possible.

Thanks.

#3

Please replace your code with this.

.backstretch img {
    width: 1600px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

Please note though that this is not recommended as this will not look good on mobile. Also, if issues arise from the use of the code and for further enhancements, you need to hire a developer to continue developing the custom layout.

Please also optimize your image using a plugin like ShortPixel. Your site load very slow because of the image. It’s 9 Mb.

Thank you for understanding.

#4

Thank you very much for your help and advice. have a great day and happy new year.

#5

Question… can the code you provided only be used for specific screen sizes, in this case only for screen sizes 1200px & up? Because viewing the background image via firefox in smaller sizes this issues seem to be gone. Because the lower screen sizes the background image goes fullwith.

#6

That is possible using media queries. See https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Thanks.

#7

thank you for your help

#8

You’re welcome.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.