bijoume bijoume - 1 month ago 3
CSS Question

Background image gets "zoomed in"

I have this red background image which looks like this:

enter image description here

Those rectangles look crisp and nice. But when I add this as a background image with CSS, I get a zoomed in effect and it doesn't look good at all:

enter image description here

The size of the image is 1800*344px. Somebody here has suggested using background-size: contain; but this ends with not showing the background at all.

Here's the HTML:

<section id="aboutprocess">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<p class="text-center">Our agile team continuously delivers working software and empowers your organization to embrace changing requirements.</p>
<button type="button" class="btn btn-default center-block blue">more</button>
</div>
</div>

</section>


And the CSS:

#aboutprocess {
margin-top: 64px;
padding: 64px 0;
background: url(../img/tech_bg.jpg) no-repeat center center fixed;
width: 100%;
height: 344px;
background-size: cover;
}


How can I achieve the same result as shown in the design file? Thank you for helping.

Answer

With background-size set to cover. It will stretch or skew the image to the size of the screen based on how large or small the window size is. Best to use contain in this scenario as by the looks of the image i believe it can be repeated without showing visible joins so try the following css.

#aboutprocess {
                    margin-top: 64px;
                    padding: 64px 0;
                    background: url(../img/tech_bg.jpg) repeat center center fixed;
                    width: 100%;
                    height: 344px;
                    background-size: contain;
                }

Hope this helps.