Background image

Question

I have a webpage with a background image and some content. My problem is that the image is full screen in the background, but as the content is not a that a page, when I scroll down I see the content without the image.

How may I expand the background image so that it covers the whole content even after the scrolling down?

.backImage {
   background: url('./images/panoramiki.jpg');
   background-size: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   right: 0;
   z-index: -1;
   filter: blur(5px);
   -webkit-filter: blur(5px);
   background-position: center;
   background-repeat: no-repeat;
   background-repeat: repeat;
   background-size: cover;

 <div class="backImage"> </div>

Possible duplication of https://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only — AaronHolland, Jul 17 '18 at 06:33
Hi, welcome to stackoverflow! Without provided some sort of source code we will only be able to guess what is your problem. Please edit your question and include a preferrably minimal, runnable example. — sn42, Jul 17 '18 at 06:37

score 0 · Accepted Answer · answered Jul 17 '18 at 06:46

Do you mean like in the snippet below? in that case you can use
background: url("image") no-repeat center center fixed; Or read more here

body {    
    background: url("https://sdtimes.com/wp-content/uploads/2014/10/HTML5_sticker.png") no-repeat center center fixed; 
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p><h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p><h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>

</body>
</html>

you should have explained, that this sets the property background-attachment — Kapsonfire, Jul 20 '18 at 12:23

score 0 · Answer 2 · answered Jul 20 '18 at 12:25

you are looking for the css property "background-attachment" - this will lead to, that the image wont be scrolled with the window

https://www.w3schools.com/CSSref/pr_background-attachment.asp

.backImage {
        background-size: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        right: 0;
        z-index: -1;
        filter: blur(5px);
        -webkit-filter: blur(5px);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover; 
        background-attachment: fixed;
}

Background image

2 Answers2