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

Popular posts from this blog

javascript - How to get current YouTube IDs via iMacros? -

c# - Maintaining a program folder in program files out of date? -

emulation - Android map show my location didn't work -