Problems related full-screen background image

Problems related full-screen background image
0.0 0

#1

Hi, I want to make a landing page with a full-screen background image. Nothing is coming out from my code. Can anyone help me explaining it? the pen goes here


#2

@Jinat-Rehana I don’t know why the image url you chose wont display - but I switched it for a couple of different randomly selected image urls and both displayed fine in your pen. For example try this url: https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Rep.Barbara_Jordan-_Restoration.jpg/478px-Rep.Barbara_Jordan-_Restoration.jpg

So perhaps something odd about the image url you chose?


#3

@Jinat-Rehana If you use chrome you can right click on the image and go ‘search google for image’. This will return a lot of urls which have the same image, for example I found https://i2.wp.com/www.fileswiper.com/wp-content/uploads/2016/02/Windows-7-Ultimate-ISO-Free-Download-32-bit-and-64-bit.jpg?resize=1140%2C640 which seems to be the same image and works fine in your pen. However, you do of course need to make sure that whoever owns the image doesn’t mind you using it… Alternatively if you host your page on github pages rather than codepen you could have a folder for your images rather than loading from a different url.


#4

Hi, thanks for your informative reply, but some reasons i tried with the image link you provided and not working. Do you find any problem in my html code? I used div.


#5

@Jinat-Rehana if you give your div height and width the image will show. e.g. #bckgroundDiv { height: 1000px; width: 1000px;

I guess the div containing the background image needs dimensions or it reduces to nothing.

You can also put the background image in body { instead and this also works.


#6

hi, thanks again. yes it’s working fine if i style the body element but it does not work in mobile screen. I wanted to make it fully responsive thats why i was trying to use div. I tried with giving .bckgroundDiv height:100% width:100% but its not working. Also i tried with width:1000px and height:1000px but scroll bars are coming even though the background-attachment:fixed is set. Do you have any idea how can i make my code fully resposive?


#7

@Jinat-Rehana Set your div id properties as:

#bckgroundDiv {
  height: 100vh;
  width: 100%;

I forked your pen to illustrate here.
It’s responsive! :slight_smile:


#8

Hi,

Really appreciating your assistance regarding this issue. Yes now it’s responsive. But, I cannot get rid off the scroll bars. I tried overflow-x:hidden selecting body tag, it works in desktop but not in mobile. Tried also giving margin:0px to every div but nothing effects in mobile screen. What is actually happening here- I have no idea even though the div is given the viewport height why the scrollbars are coming? I am a bit frustrated of fixing this small work for so many days :frowning:


#9

//body{
background:no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

}//


#10

Hi, thanks.I tried this very early but does the code work in mobile device. so far i have tested it’s not working in mobile device. Do you have any idea of implementing grid system in this regard? I am trying to do so, but stuck in some css issues.


#11

@Jinat-Rehana the fork I made of your pen doesn’t show any scrollbar when I resize browser on my laptop, or when I use chrome devtools to open responsive view and see as mobile size (although I haven’t tried on an actual mobile device). Does my fork show scrollbars for you?


#12

Hi, @BartBucknill yes the forked pen you made for me shows scrollbars in my laptop as well as in my mobile device :slight_frown:


#13

@Jinat-Rehana My bad - there was a scrollbar it just wasn’t easy to see. Anyway I’ve figured out the problem; I’ve fixed it in the pen I forked here.

The problem is with a conflict between bootstrap’s .row and .container-fluid. To quote a stackoverflow answer:
“The .row adds a 15px margin to the left and right. Since .container-fluid fills up 100% of the screen width, the extra margin space causes overflow issues.”

You can see the solution in the pen and in the stackoverflow answer I’ve linked to.

What is probably more important is how I got to the answer:

  1. I disabled various features in the pen I forked from you to see the effect. This showed me that disabling row got rid of the scrollbar.
  2. I googled “bootstrap row causing horizontal scroll”.

Bingo! I had the answer.

FCC mentions read, search, ask. I would also add to this ‘play’ with your code to see what the effect is. When you don’t know what question to ask this is often the best way to get started on generating the question.
:slight_smile:


#14

@BartBucknill Thanks the way you showed me how to find a problem and get into a solution is very helpful and encouraging for me. Thanks for all your effort on this issue. Your solution working fine with big screen desktop and laptop but not in mobile device. Still the scrollbar or some extra spaces or may any other issue that is making the image moving around in the mobile screen. But I am hopeful and want to fix this problem following your suggestions :slight_smile:


#15

@Jinat-Rehana its odd that you find the scrollbar on mobile. Opening it on my mobile (iPhone) I don’t get a scroll bar (definitely this time!).
Good luck sorting it out!