Help with my project ( background images)

Language Help CSS
,
1

Hi ! I’m trying to insert a background image behind the heading" Aviation…" there. Now I’m un two minds, I don’t know if the “backgroung image…” should be in the INDEX or in the CSS or both.After reading the Cheatsheet again I 've tried many times but nothing changed and I’m a bit confused now. Could you help me ?

BTW: can I create a

for each part of my webpage ? should I ?
thanks a bunch in advance !

https://www.codecademy.com/workspaces/63d18568206871a64dd0a544

2

If you add the background-image as an inline-style (which is what you tried to do when adding the css style background-image:url (“your-image-path”) to the html tag) you need to wrap that in a style attribute, like:

<div class="header" style="background-image:url('your-image-path');"

It would be a better practice in this context to add that in your css:

.header {
  background-image:url("your-image-path");
}

Don’t put a space between url and the parenthesis, this tends to fail.

1 Like
3

Thanks ! I tried but unfortunately it didn’t work. Might it be because it is a .png?
thks again !
https://www.codecademy.com/workspaces/63d18568206871a64dd0a544

4

There are several syntax errors, one has been already in my answer:

  1. The quote marks inside the parenthesis need to be single quote marks if the quote marks around the style definition are double quote marks (I corrected that in the above post)
  2. There is no space between the class and the style attributes
  3. There is a > missing in your div tag
2 Likes
5

Thanks! this time it worked! It does not show the complete image , only the upper part, but maybe this is connected to sth I haven’t learned yet.
Thanks for helping me this time.

1 Like
6

If you haven’t styled the background-image in css yet, it will spread within the container where it is applied (div.header) with the size of the image. If the image is smaller than the div, it will be repeated – if the image is larger than the div, it will be cut.
So in CSS you will have to apply several background-styles like:

  • background-repeat
  • background-size
  • background-position
7

Hi ! thanks! those I haven’t covenred yet but I’ll do it and as soon as I do I’ll transfer sort this out !
thks!

1 Like
8

Sorry Its me again. Just out od curiosity: whenever I insert an image in the Index file ( vieo, photo, audio) , should I always repeat the url in the CSS as you told me to do with the background image?
thks a bunch!

9

I would recommend to only include background-images in the css file and not having them in the html as an inline style.

Either:

HTML (Content images)

<img src="relativepath/image.jpg" alt="image description" />

or:

CSS (Background images)

div.header {
   background-image: url('relativepath/image.jpg');
}
10

Thanks! I guess this is also true for videos and standard images. Is it?
Thank you!

11

I don’t know what you mean with standard images. Maybe what I meant with content images?
And it’s a little different with videos as you can’t insert a video as a background-video as you can with background-images. There is no background-video-attribute. So you would usually insert videos in html with the <video> tag.

12

Thanks! I meant contact images, you’re right.
Got it!