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

Maria Konovalova
Maria Konovalova
4,818 Points
Posted by 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
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; }

Al Lu
seal-mask
.a{fill-rule:evenodd;}techdegree
Al Lu
UX Design Techdegree Student 15,698 Points
Al Lu
.a{fill-rule:evenodd;}techdegree
Al Lu
UX Design Techdegree Student 15,698 Points

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
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.

Al Lu
.a{fill-rule:evenodd;}techdegree
Al Lu
UX Design Techdegree Student 15,698 Points

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
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