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

Load Balancing in Bluemix using custom domain and DNS SRV records -

oracle - pls-00402 alias required in select list of cursor to avoid duplicate column names -

python - Consider setting $PYTHONHOME to <prefix>[:<exec_prefix>] error -