Can't display CSS background-image

Can't display CSS background-image
0.0 0

#1

Helo,

Coudl somebody tell me what’s wrong with my CSS code for .body and background-image? It should display the external image with “norepeat” parameter, but nothing displays.

And in general what do you think of my Portfolio? I’m just starting (I’ve been working 1 hour on it until now).

Regards

https://codepen.io/theoask/pen/KoaEbW


#2

It’s the ".body"
The body tag in html doesn’t have a class or id added to it by default so targeting you would just do:

body{
....
.....
}

Unless it’s the case where you add a class or id to it, then you’d target that.

EDIT: And adding to what @randelldawson mentioned, you might want to also look into utilizing the background-size property.


#3

Adding to what @dlyons already told you, you also need to research what valid values are for the background-repeat property. “norepeat” is not a valid value.


#4

Ok it should be better now. Any suggestion to see more clearly the text on the background image?


#5

Because that background image has such contrasting colors (white/black) it will be difficult to find a color which at some point does not blend in with the background. My suggestion is to experiment with creating a container for each section and the containers could be slightly translucent but have a definite background color. Then, you could make your background picture fixed (background-attachment: fixed;), so that it does not move, but you can still scroll through the other page content.

P.S. - You still need to fix the “norepeat” issue and thinking about using the background-size property as suggested by @dlyons.


#6

I’ve been working quite a lot now on my Portfolio projetc. I think its much better.;What do yout hink?

However I can’t seem to be able to enhance my nav bar…I would like to set it to a different colour and align it on the left.
Also I would left to set my image in the center (the image from shutter stock).

For an unknown reason my Submit code is in the comments box…Why??

<button class="btn btn-block" type="submit" name="submit" onclick='javascript:checkemail();'/>Send it!</button>

I will continue working on my portfolio.


#7

Check out this FCC Bootsrap Guide, it’ll help you out with centering things and tweaking your layout.

By the way in regards to that Shutterstock image, I have to mention you really shouldn’t hot-link images from other websites or use images on your page that you don’t own a licence to or have created yourself. Even for practice projects and placeholder images, you should host the image files yourself somewhere and only use images you own or that are public domain (or at very least free to use with creator attribution). There’s lots of websites out there that have free, public domain images you can use for projects by the way. Like Unsplash.com for example.


#8

Why? Because you nested the button within the textarea element.

In general you need to validate your html section. You have many (at least 20 syntax issues) ranging from unclosed tags, tags out of place, closing tags for elements which do not have closing tags (i.e img, hr), trying to use attributes on elements which are not valid and many more.

Use the Analyze HTML under the dropdown menu on the upper right-hand side of the HTML Codepen Module. Fix all of those errors first and then see how your layout changes.