HTML advice

rufusbear · 3 Jun 2016 at 16:48

Hi everyone,

Im just getting started in html and have gone through a few udemy courses to get me started. Just looking to get some help on something. I am wanting to have a big full screen image with the rest of the content including navigation bar on top of the image.

This is an example of what i am trying to do
http://saltsurf.com/

Just not to sure how i get the navigation and other elements to sit nicely on top. This is the code i have so far,

<header>
<nav>
<img src="resources/img/logo-white.png" alt="mylogo" class="logo">

<ul class="main-nav">
<li><a href="#features">About Me</a></li>
<li><a href="#works">What i offer</a></li>
<li><a href="#cities">Contact Me</a></li>
</ul>
</nav>
<div class="main-image">
<img src="resources/img/main-image" alt="main-image" class="main-image">
</div>
</header>

Hope someone may be able to lend a hand

Many thanks

Randomface74 · 3 Jun 2016 at 16:53

HTML = content
CSS = presentation

this is a presentation question, so it's CSS you need - to apply the right styles to your HTML markup.

You should be able to get near enough with this:
http://www.w3schools.com/cssref/pr_background-image.asp

roccles · 3 Jun 2016 at 16:56

You will need to use CSS to set the background image then you will be able sit the rest of the content on top

This maybe helpful LINK

rufusbear · 3 Jun 2016 at 16:59

Thanks for that, i should have mentioned CSS not HTML thats my fault! Would i have to put the background image on the '<nav>' tag for all the other elements within the '<header>' tag to lay on top?

Thanks for you kind response

Randomface74 · 3 Jun 2016 at 17:01

define a css class, then you can try applying it to different elements, you can even add more nested div elements if you need to.

radderfire · 3 Jun 2016 at 18:14

The technique to use is to set your image as a background image. You can either set the background image on your body tag like this in CSS:

body {
background-image: url('images/your-image-name.jpg');
}

Or, use a uniquely named div on your page. It is common practice to use a container div that bounds all your page content for layout purposes i.e. in HTML:

<div id="container">
*All your page content*
</div>

Then in your CSS file:

#container {
background-image: url('images/your-image-name.jpg');
/* the rest of your container CSS here */
}

Cern · 3 Jun 2016 at 21:53

rufusbear said:
Thanks for that, i should have mentioned CSS not HTML thats my fault! Would i have to put the background image on the '<nav>' tag for all the other elements within the '<header>' tag to lay on top?

Thanks for you kind response

No, the best place to put a large background image is the body tag. In your CSS you should assign an image to the body tag as follows:

body {
background: url(images/my-background.jpg) no-repeat top center;
}

Note however that this will mean every page on your site will have the same background image, which may or may not be what you want. If you want to use different background images on different pages, you'll need to make a class for each image and assign that class to the body tag in the HML. For example:

<body class="background1">

Your <nav> tag should be reserved only for those elements that handle your navigation, with the styling of these handled in your CSS.