CODEWITHSUNDEEP
htmlcssmobileinterface
datisdesign
datisdesign

Reputation: 3195

Fixed background cover becomes zoomed in mobile view

I'm using a fixed background cover for my website here: http://www.datisdesign.com

Every page has a big header image, but in small devices such as mobiles, the cover image becomes so large. I want to make it smaller in mobile devices.

This the code that I'm using:

#takelessons {
    background: url(../img/portfolio/takelessons-intro.jpg) no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center top;
}

Normal view

Mobile view

Upvotes: 11

Views: 10323

Answers (4)

fivebit
fivebit

Reputation: 87

I found that if background-size: cover is used with background-attachment: fixed it causes this issue on mobile.

Changing from 'fixed' to 'scroll' fixes it.

In my case I used Javascript for my parallax effect so I was able to update the equation to account for the different background behavior.

Upvotes: 0

dubucha
dubucha

Reputation: 1077

I solved my problem by limiting the capability to the large tablet screen size.

@media screen and (max-width: 992px) {
    #parallax {
        background-attachment: scroll;
    }
}

Upvotes: 4

user2812693
user2812693

Reputation: 61

Try this one out

background: url(image.format) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Upvotes: 1

KM123
KM123

Reputation: 1387

Here you go :)

Add the below to your style...

background-size:100%;
width:100%;

I hope this helps

Upvotes: 2

Related Questions