Make background image full page in html

Question

I'm working on this movie website and put a background. I want the background to repeat itself and cover the whole page even if I scroll down but for some reason I can't fix it. I tried searching for it and tried every solution I got from google but all in vain. This is my code for background image. I tried changing the value of back-ground repeat to repeat-y but still it didn't work. Any hints on what to do?

/*------ Background image ------*/
.bg-image {
/* The image used */
background-image: url("bgd.jpg");

/* Add the blur effect */
filter: blur(4px);
-webkit-filter: blur(4px);

/* Full height */
height: 100%;


/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

/* ------------------------ */

If you want the background to repeat set the `background-repeat` to `repeat` — Abdullah Razzaki, Oct 20 '18 at 18:07
Moreover, if you want the background to stay like it is when you scroll then use `background-attachment:fixed` — Abdullah Razzaki, Oct 20 '18 at 18:09
which element have you added the `bg-image` class to? the body? — Abdullah Razzaki, Oct 20 '18 at 18:35

Ishtiaq · Accepted Answer · 2018-10-20T18:56:15.213

0

Set background style properties directly with body tag. Use background-repeat: repeat.Also you can use !important to overwrite some css property. i.e

body {
/* The image used */
background-image: url("bgd.jpg");



/* Center and scale the image nicely */
background-position: center;
background-repeat: repeat;
background-size: cover;
}

edited Oct 20 '18 at 18:56

answered Oct 20 '18 at 18:47

Ishtiaq

238
1
2
9

Yes, now it is working but what should I do for the blur effect? – Ramsha Khalid Oct 20 '18 at 18:54
Because I can't put the blur effect inside body tag since it'll blur the whole website. :( – Ramsha Khalid Oct 20 '18 at 18:54
Good, You can simply add that CSS with either body tag or with some other class. :) – Ishtiaq Oct 20 '18 at 18:57
By adding a Blur effect in some other class you can then simply use it any where in the web page :) – Ishtiaq Oct 20 '18 at 18:59
This link can also be helpful [https://stackoverflow.com/questions/38366571/how-to-blur-the-background-image-only-in-css/38366742#38366742] – Ishtiaq Oct 20 '18 at 19:23

score 0 · Answer 2 · answered Oct 20 '18 at 18:57

0

You should make the div absolute if you want to have the blur

.bg-image{
position:absoulte;
width:100%;
height:100%;
left:0;
top:0;
// existing background css
}

answered Oct 20 '18 at 18:57

Abdullah Razzaki

972
8
16

Make background image full page in html

2 Answers2