Help with Image as a Background for Portfolio Website

Help with Image as a Background for Portfolio Website
0.0 0


I’m needing help with putting an image as a background on my portfolio website. I’ve tried many different things but nothing seems to help. The last thing I tried made the entire screen gray and took out the task bar. Here’s the link for my codepen page Could anyone tell me what I’m doing wrong and how to fix it? Any help would be greatly appreciated.


Here is the thing you are missing. Background image is set inside body element in css. I found you didnt have a body elemet. Second thing which i notices in your code was the image url, it was of dropbox. use absolute url of image and not of a website. there are many website which provide images with ,jpg extension but are not the absolute url. Anyway here is the corrected css code.


background-position: center center;

background-repeat: no-repeat; 

background-attachment: fixed;

background-size: cover;



A few things first:

  • When using codepen, you should place your "head elements" in the Pen’s settings (under the "Stuff for <head>" section).
  • The syntax for comments in CSS are /* and */.
  • Your background style declarations are outside any ruleset.

One way you could have a background for the whole page, is to place it inside a ruleset for the body element:

body {
  background-image: url('//');

Try the suggestions first, then see this pen if your still stuck:


Thanks! I used the code pen and I was able to make it work. But do I need to add content before a scrollbar appears? Also how do I make the navbar run the length of the screen? I’ll try a few more things to fix it but thanks again.


You can add an overflow-y: scroll; [1] declaration to your body ruleset so that the scrollbars will appear even without content . Regarding the navbar, .topnav's parent element, div.fluid-container applies a left and right padding. If you remove these padding values, the navbar will run the length of the screen. MDN has a helpful section on CSS Box Model [2] you can check out.



Wow! Thanks! It worked beautifully. I appreciate all your help.