Background Image cropping on mobile site

  • Resolved maxinehowarth

    (@maxinehowarth)


    9 years, 9 months ago

    Hi guys,

    I’ve set a background image on my page in the css and all works well on browser and even works when I resize the browser to mobile size. But when I view it on my iPhone if the page is too long it cuts the image off which is an issue because my paragraph text is white.

    I’ve tried repeating the image in my media queries and also removing the image completely when resizing the screen.

    Anyone got a fix? the site is royallondon.foodserve.net

    Thanks

Viewing 3 replies - 1 through 3 (of 3 total)

  • background-size: cover would force the image to cover the entire screen cropping out areas to make sure the image covers all areas.

    Maybe that would help?

    you need to give that image a class
    eg <img class=”image” src=”#”>

    then target the class in a css media query and give it width of 100% and it will fit whichever screen you specify with the media query.

    @media screen and (max-width:480px){
    .image{
    width:100%
    }
    }

    Thread Starter maxinehowarth

    (@maxinehowarth)

    background-size: cover worked! thank you!

    I ended up applying it to the media queries if anyones interested here’s what it looks like:

    @media only screen and (max-width: 1023px) {

    .body {
    background-size: cover;
    background-image: url(https://royallondon.foodserve.net/wp-content/uploads/slate.jpg);
    }

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Background Image cropping on mobile site’ is closed to new replies.