Photoshop Question posted in
The official user guide can be found here.

resizing background images with media queries to shrink with the browser window and stay center – Photoshop

I’m trying to build a website which uses a background image with Bootstrap 4. I want the image to resize but unfortunately it focuses at different points on the image as it hits the breakpoints not really centering the image. Should I use resized images via photoshop or resize images via css resizing/shrinking the image. i.e. How do I get background image to stay at the center of the screen. sample of the media query code below: (initial image size is 2000px x 1333px. Thanks!

.landpage-img {
    background: url(../img/bg-neon-01-2000x1333.jpg) no-repeat center center fixed;
}
Tags:

2

Answers


  1. 0

    You can make parent query 

    .parent {
width: 100%;
position:relative;
}

    And 

    .landpage-img {
position:absolute;
left: 50%;
transform: translateX(-50%);
}

    And your image will be in the middle of parrent selector.

    Login or Signup to reply.
  2. 0

    You can either use background-size: cover; or background-size: contain;.

    Like so: 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style>
.landpage-img {
    background: url(https://picsum.photos/2000/1333) no-repeat center center fixed;
    background-size: cover;
}
</style>

<div class="container-fluid landpage-img" style="height: 100vh">
    <div class="row">
        <div class="col">
            Some content goes here
        </div>
    </div>
</div>

    background-size: contain; maintains the proportions of the image while background-size: cover; is designed to cover things completely even if the image needs to be cropped a little. So, you’ll probably want to use background-size: cover; most of the time.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search