CODEWITHSUNDEEP
htmlcss
aaossa
aaossa

Reputation: 3872

Background image bigger than window

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!

Upvotes: 0

Views: 1336

Answers (2)

Pratyush Pranjal
Pratyush Pranjal

Reputation: 554

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;
}

Upvotes: 1

Plummer
Plummer

Reputation: 6698

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;

Upvotes: 2

Related Questions