CODEWITHSUNDEEP
htmlcssimagesafariscaling
Barrett
Barrett

Reputation: 151

HTML/CSS Background image doesn't scale in Safari

I'm having a problem with background image scaling in Safari (specifically on the iPhone).

Here's how it looks on iPhone:

screenshot

Here's how it should look (at least):

screenshot

Here's the CSS code:

#home {
background-color: rgba(0,0,0, .5);
background-image: url(../img/header-bg.jpg);
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
position: relative;
text-align: center;}

img {
vertical-align: middle;
max-width: 100%;
height: auto; }

I forgot to mention that "home" is the "id" of a <section> tag. The idea is to use an image background for this "#home" <section>.

Upvotes: 0

Views: 232

Answers (1)

Farshid
Farshid

Reputation: 518

I don't have safari, Try it:

#home {
    height: 500px;
    background-color: rgba(0,0,0, .5);
    background-image: url(../img/header-bg.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-attachment: fixed;
    position: relative;
    text-align: center;
}

Upvotes: 1

Related Questions