Sources files for a Six Revisions tutorial called Responsive Full Background Image Using CSS

  • By Six Revisions
  • Last update: Nov 14, 2022
  • Comments: 2

Responsive Full Background Image Using CSS

Responsive Full Background Image

Demo

View the demo on Six Revisions.

What Is This?

These are the sources files for a Six Revisions tutorial called Responsive Full Background Image Using CSS.

  • responsive-full-background-image.css - this contains the CSS for achieving the responsive full background image
  • responsive-full-background-image-demo.html - this is the HTML source code
  • Files in the /presentational-only are not required. They're purely for demonstrative purposes.
  • /images directory contains the background images. The background image is from Unsplash.

Basics

The most important property/value pair is background-size: cover, which dynamically scales the background image to cover the viewport even when it's resized. Responsive full background image can be achieved using this simple style rule:

background: url(background-photo.jpg) center center cover no-repeat fixed;

For a faster page load on small screens (i.e., mobile devices) a scaled-down version of the background image is served using a media query.

For a complete explanation, read this tutorial: Responsive Full Background Image Using CSS.

License

The source code is released into the public domain under CC0 1.0 Universal. The source code is free of any copyright restrictions. You can use, copy, sell, modify, distribute, etc. the code, even for commercial purposes, all without asking permission, providing attribution or performing any requirement.

Github

https://github.com/sixrevisions/responsive-full-background-image

Comments(2)

  • 1

    jquery src

    Hello. I'm Christopher Your tutorial https://www.webfx.com/blog/web-design/responsive-background-image/ is very interesting, but when I tried to run and test it, I ran into one problem. I had to change jquery.min.js to Please check it, maybe it's my mistake, but the original version didn't work for me. I think adding information in the comments about the option to select a version will be fine for new web designers who are just starting their adventure. Best regards, Christopher

  • 2

    The difference of a Desktop and iPhone's Safari is roasting my mind.

    Hey.

    While trying to find a solution for this seriously stupid problem, I came across your blog post about background-size: cover.

    The past five days, I have spent implementing a tiny little background animation - which works and looks nice. But then when I tested it on my Phone, I realized how broken the background was.

    So I added that very property with value cover only to see that the background continued to scroll... So I am a lot lost. Without the property, all my background does is stay in the center of the page - adjusted by it's width instead of being in the way i want.

    background-size: cover however breaks the zoom-in effect (as in, the image is always centered in the background and looks good). When applied, the image is scaled by its width, and i have black bars on the top and bottom since the background is not fully streched... So its either this or that. See why my mind is "roasted"? :)

    My HTML markup looks a bit like this:

    <!DOCTYPE html>
<html>
    <head> ... </head>
    <body>
        <div id="bg"></div> <!-- the real background -->
        <div class="blurr-bg"></div> <!-- The background with a blur filter -->
        <div id="MainPage"> ... </div> <!-- This holds everything from the top to the actual content -->
        <footer id="footer"></footer> <!-- I use the jquery.stickyfooter plugin, that is why it is separated from #MainPage -->
    </body>
</html>

    And the CSS for #bg and #blurr-bg:

    body {
    background-color: black;
    color: white;
    height: 100%;
    width: 100%;
    z-index: 0;
    position: relative;
}
#blurr-bg, #bg {
    background: url("/cdn/theme/images/bg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#bg {
    z-index: -2;
}
#blurr-bg {
    z-index: -1;
    -webkit-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    -Ms-filter: blur(5px);
    -khtml-filter: blur(5px);
    filter: blur(5px);
}

    I also use a bit of PHP to determine mobile safari. If it is found, this is also present:

    @media only screen and (max-width: 767px) {
    #blurr-bg, #bg {
        background-size: cover;
    }
}

    So... Do you see anything that could cause all these issues with the background? The blurred background is what is mostly visible. There is a transistion from the non-blurred background to the blurred one on the index page that is handled via JavaScript and jQuery.fracs (the less of the intro section is visible, the more blurred is the bg).

    Any help would be really appreciated!

    Kind regards, Ingwie

Popular Tag

Related