Question 246304 in Html Question posted in
Some basic documentation can be found here.

Html – make a background image adjust to devices of all screen sizes

I have an image it’s serving as the background for some other elements on my website, the problem is the image is wider than it is tall. For users of computers, tablets in landscape, and other screens that are wider than they are tall, this dose not pose a problem. But for users of phones it dose create a problem the image resizes so that the entire thing fits on the screen, is there a way I have the sides of the image be cut off. I need to keep any CSS as part of the bootstrap framework, or in the style tag, I tried using overflow but it didn’t make a difference.

Here is my code.

<div class="text-white" style="
background-image: url('/static/ghc_building_darkened.jpg');
background-position: 50%;
background-repeat: no-repeat;
height: 100vh;
overflow: auto;
width: auto;
background-size: 100%;
">
  code omitted here.
</div>
Tags:

2

Answers


  1. 0

    Change the property background-size to contain or cover, according to what you want the image to do. Contain will adjust the image so that the longest dimension fits inside the container, and the cover adjusts the image, so that the shortest dimension takes full space.

    Login or Signup to reply.
  2. 0

    Replace all CSS properties with following CSS properties:

    background-image: url('/static/ghc_building_darkened.jpg'); 
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
height: 100vh;
width: auto;
overflow: auto;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search