Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Maria Konovalova
Maria Konovalova
4,818 Points

Trouble with background image

Hi there!I'm getting a little toruble with my CSS code. It's valid, but something is going wrong. I use Pure CSS framework for layout, so, maybe, it is messing up with my own CSS? Here's my HTML.

Adding stylesheets and scripts: <head lang="RU"> <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/> <title>Some title</title> <link href="css/pure.css" rel="stylesheet" type="text/css" /> <link href="css/main.css" rel="stylesheet" type="text/css" /> <link href="css/jquery.countdown.css" rel="stylesheet" type="text/css" /> <link href="css/fotorama.css" rel="stylesheet" type="text/css" /> <link href='http://fonts.googleapis.com/css?family=Lobster|Open+Sans:400,800&subset=cyrillic,latin' rel='stylesheet' type='text/css'> <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="js/jquery.countdown.js"></script> <script type="text/javascript" src="js/fotorama.js"></script> </head>

And my HTML markup for 2 sections - menu and header. Other sections on this page are using bg.jpg, so I use it in container div.

<div class="container">
        <section id="menu">
            <div class="menu">
                <div class="pure-menu pure-menu-open pure-menu-horizontal pure-menu-fixed">
                    <ul>
                        <li><a href="#">One</a></li>
                        <li class="pure-menu-selected"><a href="#">Two</a></li>
                    </ul>
                </div>
            </div>
        </section>
        <section id="header">
            <div class="header">
                <div class="main">
                    <div class="up-orange">
                    </div>
                    <div class="pure-g">
                        <div class="pure-u-1-3 tanya">
                            <img src="img/tanya.png" alt="Alt">
                        </div>
                        <div class="pure-u-2-3">
                            <h1 class="header-heading">Heading <strong>and</strong></br>subheading</h1>
                            <a class="pure-button pure-button-xlarge blue-button" href="#">Button</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

</div>

2 Answers

Maria Konovalova
Maria Konovalova
4,818 Points

My CSS that goes on top of Pure CSS: body { min-width: 1024px; background: #f7d69e; }

.container { background-image: url(img/bg.jpg); width: 100%; }

.main { width: 900px; margin: 0 auto; padding:15px; } .menu { width: 100%; background: #fa8e3c; margin:auto; z-index: 10; }

.pure-menu ul { color: white; background: #fa8e3c; padding: 15px; width: 100%; text-transform: uppercase; }

.pure-menu-selected { font-weight: bold; color:#0791cc; font-size: 1.3em; }

.pure-menu a, .pure-menu .pure-menu-can-have-children > li:after { color: white; font-size: 1em; }

.header { margin-top: 70px; background-image: url(img/header_bg.jpg); }

.tanya { margin-top: -210px; }

.header-heading { text-align: right; } .header-heading strong { color:#fa8e3c; font-size: 70px; }

Hey. What is the problem? If you can't see the background img so you need to check for syntax error in your background-image. You have missed a few characters after the url.

Maria Konovalova
Maria Konovalova
4,818 Points

The thign is that my browser wasn't showing any backgroung images with any syntax I tried: url(img/img.jpg), url(../img/img.jpg), whatever. The problem disappeared when I used url(../img/img.jpg) AND copied all files to web-server.

You right. It should be: url(../img/img.jpg). Not sure why but if your css is in its own file and the images are in there own file as well you need to add two dots and a slash. I think its telling the browser to look outside the css file but im nor sure.

James Barnett
James Barnett
39,199 Points

Alon Lubin -

> Not sure why but if your css is in its own file and the images are in there own file as well you need to add two dots and a slash. I think its telling the browser to look outside the css file but im nor sure.

That's called a relative path and you can read more about them and how they differ from absolute paths in this tutorial on absolute vs relative paths