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

Posted by Konrad Pilch
Konrad Pilch
2,435 Points

Mind blowing!

HI,

Everything works, apart fomr that extra right space that i cant get rid off. Im using bootstrap.

Heres my code :

 <!-- Header -->
    <header id="masthead">
        <div class="image-overflow">
            <div class="header-background-image">
                <img src="assets/img/13.jpg" scale="0">
            </div><!-- /header-background-image -->
        </div><!-- /image-overflow -->

        <div class="row top-banner">
            <div class="container">
                <a href="aurelian" title="My Name" rel="home"></a>
            </div><!-- /container -->
        </div><!-- /top-banner -->

        <nav class="navbar navbar-default">
            <div class="container">
                <div class="container-fluid">

                    <!-- Brand and Mobile Version -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main-navbar" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        </button>

                        <a class="navbar-brand" href="#">My Name</a>
                      </div><!-- /navbar-header -->

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="main-navbar">
                        <ul class="nav navbar-nav">
                            <li><a href="home.php">Home</a></li>
                            <li><a href="about.php">About Aurelian</a></li>
                            <li><a href="blog.php">Blog</a></li>
                            <li><a href="blog.php">Resources</a></li>
                            <li><a href="contact.php">Get in Touch</a></li>
                        </ul>
                    </div><!-- /main-navbar -->

                </div><!-- /container-fluid -->
            </div><!-- /container -->
        </nav><!-- /navbar navbar-default -->
    </header>

* Global Styles
**********************************/
body{
    background: #EBEBEB;
    line-height:1.75;
    font-size: 14px;
}
.row{
    margin:0;
}


/* Header
**********************************/
#masthead .header-background-image{
    position: absolute;
    overflow: hidden;
    z-index: -1;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
}
#masthead .header-background-image img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    min-width: 50%;
    min-height: 50%;
}
#masthead .top-banner{
    height: 70px;
    position: relative;
}


#masthead .top-banner{
    position: relative;
}

/** Navbar **/
.navbar{
    margin:0;
    background:rgba(0,0,0,0.4);
}
.navbar-default{
    border-color:rgba(231, 231, 231, 0);
}
/** Links **/
.navbar-default .navbar-nav>li>a{
    color:#FFF;
}
.navbar-default .navbar-nav>li>a:first-child{
    padding-left:0;
}
.navbar-default .navbar-nav>li>a:hover{
    color:#EFEFEF;
}
Colin Marshall
Colin Marshall
32,861 Points

Is this from a specific Treehouse lesson? If so, please share a link to the video from the course you are on. If this is just a personal project, can you share your workspace or put it in a CodePen?

2 Answers

Colin Marshall
Colin Marshall
32,861 Points

Your problem is your header-background-image class has a width of 200%. Change it to 100%.

#masthead .header-background-image{
    position: absolute;
    overflow: hidden;
    z-index: -1;
    top: 0;
    left: -50%;
    width: 200%;
    height: 100%;
}
Konrad Pilch
Konrad Pilch
2,435 Points

If i change it to 100%, it wont work, i did it as well. If i put it on 100%, its gonna be like 15% width , the space will disapear, but im trying to do 100% the nav and 0 space on the outside . I tried overflow hidden, just everything i couldv find and think of , nothing works.

Konrad Pilch
Konrad Pilch
2,435 Points

At least that doesnt fix it on my browser, i saw that it works fine on codepen , ummmm. Im on latest chrome i believe.

Colin Marshall
Colin Marshall
32,861 Points

I'm having a hard time visualizing this without the actual background image to use so if you provide a link to it that would help. You have left set to -50% so setting width to 150% would set it to full width with no space, but I don't know if that fixes your issue without seeing the image.

Konrad Pilch
Konrad Pilch
2,435 Points

I have checked that as well. I also did took the image out, so the image isnt problem, what i found out is that the problem is here . Just uploaded it , if u look at it now, its gonna have the space for sure . You can disable the image, wont make any difference. Aslo SumoMe , wont make any difference as well. I just tried all i dont know .

Colin Marshall
Colin Marshall
32,861 Points

Is there a specific reason you aren't just using the background-image CSS property on the #masthead div?

Konrad Pilch
Konrad Pilch
2,435 Points

Im going to put this site into a custome wordpress theme later, so i believe puting a background image in css is a bad idea.

Konrad Pilch
Konrad Pilch
2,435 Points

The effect should be so the image wont go apart from the navbar, and the right space, would disapear in the box , in the overflow-image box , while i put a class, and wrote it as well, it had no effects at all.

I tried to change everything, it just wont work , but as from my knowledge, it should just be hidden on overflow .

And im going to put this site into WP, which when i make the header customisable, i would put the upoad image fomr the user, to put it in that spot in the html, as i think in css is a bad idea, im pretty new to it as well, but i think thats the way to do it.

I just dont get it why this overflow hidden wont work , even though the 100% worked on codepen, it doesnt here.

What i saw when i put the absolute off, is that the space left, is half of the image on the header. SO baiscaly the space there is 50% of the image , wheres i pushed it and the overwlof shall work.

Spend like 2 hours on it almost, and it wont change .

Colin Marshall
Colin Marshall
32,861 Points

If you are using it in WP and want it to be customizable then you still use CSS, you just use inline CSS instead of external. 

<header id="masthead" style="background-image: url('image.png')">

</header>
Konrad Pilch
Konrad Pilch
2,435 Points

Im trusting you that this is a decent way to do it as well :D

At the moment it works, i took out the 200% width, and put the css in the html, and it works. Ill see how it will go later one :D

Maybe i messed up somewhere my code , im fairly new to this kind of , what i just did really, i usualy did different .

But still, i dont get it why it wont work.. from my knowledge everything tried, even like u , it shall work.

Thank you .

Kevin Korte
Kevin Korte
28,149 Points

I'll agree with Colin here.

Never hand generate type inline css, at that point you can get it into an external style sheet. But if you're generating dynamic css, doing so inline in the html is a pretty standard deal

Konrad Pilch
Konrad Pilch
2,435 Points

So basically, if im putting this into a WP Theme, as a background, its ok to put it as inline CSS right?

Its going to be dynamic from the user to choose the image, so i believe it wont matter since its going to be in once place and we can say its the same as using the img attribute, but instead inline css right?

Hope this isnt too messy.

Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

Which space?

Here it is in codepen

http://codepen.io/kevink/pen/Qbeqrm

Konrad Pilch
Konrad Pilch
2,435 Points

Thank you to put it in code pen . Now , if you are on iMac, scroll left or right. There will be space.

Konrad Pilch
Konrad Pilch
2,435 Points

Like try to scroll top, bottom, left, right, there will be space thats like the image space . Im trying for like 50 minutes, i just cant seem to figure it out.