html - How to responsive the large background image using CSS (WordPress) -
i have big background image, image not in small mobile browser. displayed horizontal scroll bar , image crop.
the image should be:
- the 3 person in image should display in center
- no scrollbar
how fix this?
css (responsive)
.header-home-div{ background: url(/testenvironment/files/homepage-header-mobile.jpg) !important; height: 700px; width: auto;
i tried use this:
background-size: cover !important; background-position: center top;
but it's not working
here's link
i use this test responsiveness of image
on mobile size, use !important
background property. need use !important
setting size :
@media screen , (max-width: 992px) .header-home-div { height: 1500px; width: auto; background-size: 100% !important; }
it's better remove !important
property @ first instead of overwriting above fix way.
the horizontal scrollbar depends on .header-home-h1
margin. following should fixed :
@media (max-width: 520px) .header-home-h1 { text-align: left; margin: 0; width: 100%; font-size: 2.25em; }
Comments
Post a Comment