Weird Behaviour in HTML Page

Question

I'm writing a Web Application and I am experiencing a weird behavior from my app.

Basically, I set a background-image and the website width continues passed the image length.

Here's a printscreen:

What can I do to correct this?

I'm setting the background with this line:

<header style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(<?php echo base_url('assets/pagina_voluntario.jpg');?>);">
        <div class="header-content">
            ...
        </div>
    </header>

Share with us the code you've written so we can see what you've done. — JoeL, Apr 25 '16 at 18:16
Maybe this helps `background-size: url("...") cover` and here is a site about your question https://css-tricks.com/perfect-full-page-background-image/ — Infem 401 CedupHH, Apr 25 '16 at 18:19

score 2 · Accepted Answer · edited May 23 '17 at 12:23

The default behaviour of background-image is to display the image once at it's normal size. If the viewport ends up being larger than the background image, the image will not scale or repeat.

This can be fixed though with background-size: cover which makes the background "cover" the entire space without distorting the proportions of the background image.

So you would set the size of your background-image like this:

background-image: url(http://...);
background-size: cover;

Not all browsers support the cover property in CSS, (legacy IE and older Safari versions, for example) but I keep coming back to a fallback method you can add in front of the modern (and likely more efficient) cover approach so it doesn't completely fail on older browsers:

background: url(img2x.jpg) 0% 0%/100%;

(see the original answer here)

Weird Behaviour in HTML Page

1 Answers1