Background image bigger than window

Question

I need some help with CSS. As you can see here https://jsfiddle.net/88eb92ed/ the scrollbars are enabled. I want to hide them. I've never used CSS before, and I used a template, that's why I don't know how to change it. I would like to disable the scrollbars. I don't really know what's easier: change background image size or disable scrollbars. Some code:

.body {
  overflow: hidden;
  position: absolute;
  top: -20px;
  left: -20px;
  right: -40px;
  bottom: -40px;
  width: auto;
  height: auto;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat; 
  background-image: url({{ url_for('static',filename='images/parisbackground.jpg') }});
  -webkit-filter: blur(5px);
  z-index: 0;
}

I tried using overflow: hidden (from this SO question) and check several webpages trying to fix this. It seems that the image is bigger than the window, so I would like to keep the image center, but adjustable to the window size, with no scrollbars.

Thanks!

You haven't really said what you're trying to accomplish, but it seems like you're working way too hard. https://jsfiddle.net/isherwood/88eb92ed/1/ — isherwood, Jul 14 '15 at 21:14
That look simpler. Thanks! As said in the question i don't "speak" CSS so i'll have to learn. Thanks again. — aaossa, Jul 14 '15 at 21:31

Plummer · Accepted Answer · 2015-07-14T21:10:51.483

2

If you just want to disable the scroll bars:

body {
    overflow: hidden; 
}

Notice That's on the <body> tag and not the .body class.

If you want to force the elements to fit in their parent containers, you will need to refactor how they're positioning in relation to one another.

You've got some interesting things going on in regard to your markup. I'm not sure what the purpose of .grad is. Also, would it not be simpler to apply the styles to <body> rather than trying to absolutely position <div class="body"> behind a bunch of stuff?

If you're sticking with .body, you don't need to define all four dimensions for positioning. You only need to orient one position for either X or Y.

So it looks more like:

position: absolute;
top: 0;
left: 0;

edited Jul 14 '15 at 21:10

answered Jul 14 '15 at 21:03

Plummer

6,522
13
47
75

Well, that's a demonstration that i don't know css :P I apply your recomendation and it seems to work, the scrollbars disapear. I had to write `top: 0; left: 0; right: 0; bottom: 0;` – aaossa Jul 14 '15 at 21:17
A last question. When i change the width of the window the center of the image is at the center, but when i move the height it only shows the top of the image. I hope you understand my question. – aaossa Jul 14 '15 at 21:19
You shouldn't be positioning more than one value per axis. Left and Right are your X-axis, Top and Bottom are you Y-axis. They will orient to the position of the closest parent object with a `position: relative;` attribute. – Plummer Jul 14 '15 at 21:19
I would recommend research relative positioning. This article is a good start. https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/ Also, as you're new to Stack Overflow, don't forget to mark answers as accepted as you feel appropriate. – Plummer Jul 14 '15 at 21:21
Yes, thanks @tPlummer for your working (already apply it) and fast answers. I'll start with that article to understand what's going on. – aaossa Jul 14 '15 at 21:28

score 1 · Answer 2 · answered Jul 14 '15 at 21:15

Try below :

http://jsfiddle.net/pratyush141/mkzkqdv0/

.body{
width:100%;
overflow: hidden;
position: absolute;
top: -20px;
left: -20px;
right: -40px;
bottom: -40px;
background-size: cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;   
background-image: url(http://www.meezan.tv/themes/default/member_images/example_background.png);
-webkit-filter: blur(5px);
z-index: 0;
}

Background image bigger than window

2 Answers2