CODEWITHSUNDEEP
css
YMA981
YMA981

Reputation: 121

Div background-image have x Scroll that i need to remove

I have a div that should have a background-image. The image resolution is high, I need it to take the width/height of the screen size viewport. Scrolling up and down is OK.

The issue is that i am having scroll right/left, i need it removed so that the image fills the whole screen without any x scroll. I put overflow-x:hidden; but the scroll remains. Even overflow:hidden; didn't do the trick.

#bgImg{

background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("images/header.jpg");
background-size: cover;
background-position: center;
/* background-repeat: no-repeat; */
height: 100vh;
max-width: 100vw;
overflow-x:hidden;
/* padding-bottom: 30px; */
}

Upvotes: 0

Views: 417

Answers (2)

Temani Afif
Temani Afif

Reputation: 273021

You need to remove margin/padding from body element and apply the overflow property on parent container and not the element with the background (if needed) :

body {
    margin:0;
    padding:0;
}

Upvotes: 1

Martin Vartiak
Martin Vartiak

Reputation: 16

It works good for me, but try to add margin 0 and padding 0 to your body tag.

body{
  margin:0;
  padding:0;
}

Upvotes: 0

Related Questions