Help with Image as a Background for Portfolio Website

Help with Image as a Background for Portfolio Website
0.0 0

#1

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 https://codepen.io/donnacamos88/pen/wjBvGo. Could anyone tell me what I’m doing wrong and how to fix it? Any help would be greatly appreciated.


#2

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.


body{
 background-image:url(https://fh-sites.imgix.net/sites/914/2017/12/14232950/Ocean-Road-Tour-image-3.jpg?auto=compress%2Cformat&w=1000&h=1000&fit=max);

background-position: center center;

background-repeat: no-repeat; 

background-attachment: fixed;

background-size: cover;

}


#3

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('//example.com/my.jpg');
  ...
}

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


#4

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.


#5

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.

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y
[2]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model


#6

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