Background image -700 margin

[omg007]

We have a problem with background images on our homepage. I’ve added a custom class to add a background image which is working fine.

@media screen and (min-width: 900px) {
.rewards-home{
background-image: url(“https://d1cq11ki2hqhd3.cloudfront.net/wp-content/uploads/2015/06/bob.jpg”) ;
background-repeat: no-repeat;
background-size: contain;
}
}

However, a .alt-bg class in responsive.css is adding a -700px margin which causes the background image to disappear off the left side of the screen. Removing this margin causes lots of other problems. Any idea how I can get this to render correctly?

Thanks

Attachments:

You must be logged in to view attached files.

[Nishant – SUPPORT]

Checking it now.

[Nishant – SUPPORT]

In your above CSS, just replace background-size: contain; to background-size: cover;

Let us know how it goes.

[omg007]

Thanks. Whilst that works, it means the image doesn’t scale well on larger wide screens because its over-scaling the photo based on the left-top being at -700px.

Is there a way to reduce this that will ensure the image scales correctly?

Sorry, I should’ve included in my original post that I’d originally tried this.

[Nishant – SUPPORT]

You mean to say still the above solution is not working for big screens?

[omg007]

That’s right. Any widescreen monitor: 1920×1080 it oversizes the image when scaling it due to the large negative margin. See attached examples.

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-
@media only screen and (min-width:1500px){.alt-bg{margin-left:-100px!important;padding-left:100px;padding-right:100px}

Thanks
Mohammad