Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Malcolm Stretten
Malcolm Stretten
3,814 Points
Posted by Malcolm Stretten
Malcolm Stretten
3,814 Points

Positioning text relative to an image which is defined as a background image

This is my CSS:

@charset "UTF-8"; /* CSS Document */

/* Web Fonts -------------------- */

/* Base Styles -------------------- */ *{ box-sizing: border-box; }

body { margin: 0; font-family: Arial, Helvetica, sans-serif; background-color: #333;

}

.main-text { margin-top: 200px; color: #fff; font-size: .75em; text-align: center; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px;

} .topnav { overflow: hidden; background-color: #333; }

.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; max-width: 90%; }

.topnav a:hover { background-color: #ddd; color: black; }

.active { background-color: #009999; color: white; }

.topnav a:not(:first-child) {display: none;} .topnav a.icon { float: right; display: block; }

.topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; }

.info-panel { background: #fff; color:#999999; font-size: 0.75em; width: 35%; position: absolute; top: 20%; left: 55%; padding: 10px; border: 2px solid #009999; box-shadow: 10px 10px 30px #000; }

.logo { display: block; color: #00CC66; margin-top: 3%; width: 80%; margin-left: auto; margin-right: auto;

}

.container { position: relative; }

@media screen and (min-width: 600px) {

.topnav { overflow: hidden; background-color: #333; }

.topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; }

.topnav a:hover { background-color: #ddd; color: black; }

.active { background-color: #009999; color: white; }

.topnav .icon { display: none; }

.topnav a:not(:first-child) {display: inline-block; padding-left: 10%; } .topnav a.icon { float: right; display: none; }

.topnav.responsive {position: relative;} .topnav.responsive .icon { position: absolute; right: 0; top: 0; } .topnav.responsive a { float: none; display: block; text-align: left; }

.main-text { position: absolute; top: 40em; color: #fff; font-size: .75em; text-align: center; margin-left: auto; margin-right: auto; padding-left: 20px; padding-right: 20px;

}

}

and this is my HTML:

<!DOCTYPE html> <html> <head> <title>Harmonical</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.jamesstretten.co.uk/Harmonical/css/normalize.css">
<link rel="stylesheet" href="http://www.jamesstretten.co.uk/Harmonical/css/harmonical-styleNEW.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>

body { background-image: url("img/headphones-keyboard.jpg"); max-width: 100%; max-height: 100%; background-size: cover; background-repeat: no-repeat; position: absolute; } </style>

</head> <body> <div class="topnav" id="myTopnav"> <a href="#home" class="active">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> <a href="javascript:void(0);" class="icon" onClick="myFunction()"> <i class="fa fa-bars"></i> </a> </div>

<script> function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } </script>

<img class="logo" src="img/Harmonical-Logo-Blue-No-Background.gif">

<div class="main-text"> I am a songwriter and producer who has worked with many semi-professional and professional vocalists, currently working with great soul vocalist, Elan Noelle. <br><br> Most of my stuff is in the pop/EDM/soul/jazz style. My kit is a Yamaha keyboard linked with Logic Pro X, plus various guitars. I also write and produce TV and radio.<br><br>

 Artists I admire are Sting, Calvin Harris, Adele, Nerina Pallot, Paloma Faith, Ed Sheeran, Michael Macdonald, Jamiroquai, Paul Simon, Stevie Wonder, Emeli Sande, Sade, Steely Dan, Don Henley and others.

</div> 

</body>
</html>

I need to position the main-text such that however the screen is re-sized it always remains at a fixed distance BELOW the bottom of the photo. I have tried Guil's position: relative etc but it's not working. Can anyone help?

1 Answer

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

You shouldn't need to do fancy absolute or relative positioning, since the image is in a foreground <img> element. Margins and/or padding should do the trick. Just remember you have a media query in there and be sure to set it up so your needs are met in both size ranges.

Also, since you have a separate CSS file, you might want to move all your styles to it and keep them out of the HTML. And if the JavaScript won't have it's own file it should be moved down to be the last thing in the body.