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 Using calc() as Background Position Offsets

Posted by Sean Flanagan
Sean Flanagan
33,236 Points

Why isn't my image positioned properly?

Hi.

Can someone please tell me why my image isn't properly positioned? Even before I opened the workspace and previewed the image, it didn't fill the whole screen (desktop), yet when I shrank the width, it adjusted perfectly.

Here's my HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Background-position offsets</title>
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
        <div class="main-header">
            <h1>My Adventures</h1>
            <p>Tilde mustache viral master cleanse taxidermy letterpress. Portland cray paleo Marfa, flexitarian polaroid actually pug retro umami VHS Helvetica Godard bitters plaid.</p>
        </div>
  </body>
</html>

And my CSS:

/* BASE STYLES */

* {
    box-sizing: border-box;
}
body {
    margin: 0;
    color: white;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
h1 {
    font-size: 4.8em;
    margin: 0;
}
p {
    font-size: 1.2em;
    line-height: 1.5;
    width: 40%;
}

/* CALC STYLES */

.main-header {
    min-height: 550px;
    padding: 1.5em 0 0 2.5em;
    background: url('rock.png'), url('header-bg.jpg');
    background-repeat: no-repeat;
    background-position: calc(100% - 40px), calc(100% + 30px), 50%;
}

I'd appreciate any help.

Sean

2 Answers

Nic Bovee
Nic Bovee
10,645 Points
Nic Bovee
Nic Bovee
10,645 Points

Hi Sean,

Are you trying to place both images behind the text? I don't have your resources, but I made an example on codepen: https://codepen.io/nicbovee/pen/YEQYBB

Nic Bovee
Nic Bovee
10,645 Points

Perhaps I don't fully understand what you want the background image to do, but here is a link that may help: https://css-tricks.com/perfect-full-page-background-image/

Sean Flanagan
Sean Flanagan
33,236 Points
Sean Flanagan
Sean Flanagan
33,236 Points

Hi Nic.

I'm trying to make sure the background image (header-bg.jpg) covers the whole div. When I initially opened the workspace, unlike Guil's background image, it didn't stretch the whole way; it just went a little over halfway. It made the heading and paragraph text hard to read.

Here's a snapshot:

https://w.trhou.se/n1l2tv65yr

Thanks

Sean