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

So i am doing the project with CSS Foundations. THere is this code <h1 class="main-logo">Logo</h1> Instead of Text

Instead of Text LOGO i would like to place a image there instead that resizes with the page.

If I put a image there the page doesn't load properly with a image in its place.

But if I put the text back in there, the webpage/mobile page loads just fine.

20 Answers

If you're inserting it as a background image, perhaps try:

background-size: contain;

You can even specify a pixel measurement in there. Here, this is where I'm looking: http://www.w3schools.com/cssref/css3_pr_background-size.asp

Kelly von Borstel
Kelly von Borstel
28,878 Points

Maybe it's a problem with your css? Could you show your css declarations for .main-logo?

.main-logo { width:auto; background-repeat:no-repeat; background-size:cover; }

so in the index.html file its set as '''<h1 class="main-logo">Logo</h1>'''

I am trying to replace the LOGO text with a img file that will not mess with the css layout and will reszize with window size.

its off the CSS Foundations track 1-6

Kelly von Borstel
Kelly von Borstel
28,878 Points

Instead of using img tag in html, you can add the background-image property to your css, like this: background-image: url("yourimage.jpg");

Ya can get image there, but I can get it to resize, thats my issue

Kelly von Borstel
Kelly von Borstel
28,878 Points

You would add background-image property to .main-logo

Kelly von Borstel
Kelly von Borstel
28,878 Points

I'm not really sure... have you tried changing width: auto to width: 100%?

Kelly von Borstel
Kelly von Borstel
28,878 Points

One more thought... Some browsers don't support cover or contain. Here's a chart that shows browser support. http://caniuse.com/#search=cover

Kelly von Borstel
Kelly von Borstel
28,878 Points

If you're still stuck, maybe post entire html and css, in case there is something else causing the problem.

Well the link to my website is powersat.frozen-igloo.com

CSS Code is as follows

I have now managed to get the img logo to appear on my mobile page when I get below a certian pixel. SO if I resize my desktop browser and it gets smaller my logo appears and shrinks accordingly to screen size, and it shows up on my mobile phone no problems.

Now my issue is, when I have full screen browser, I have NO image there at all. Only appears when I resize my browser :(

/* Page Styles ================================ */

  • { -moz-box-sizing: border-box; box-sizing: border-box; } body { font: normal 1.1em/1.5 sans-serif; color: #222; background-color: #edeff0; } html, body, .main-wrapper, .col { height: 100%; }

.bgSizeCover { background-position:center; width: auto; height: 150px; background-repeat:no-repeat; background-image: url('../img/powersat-canada-large.jpg'); background-size: contain; color: #000; text-shadow: 1px 1px 0 #fff; } /* Layout Element Colors ================================ */

.main-header { background-color: #fff; } .main-logo { background-color: #fff; } .main-nav li { background-color: #3f8abf; } .primary-content { background-color: #caebf6; } .secondary-content { background-color: #bfe3d0; } .main-footer { background-color: #b7c0c7; }

/* Header, Banner and Footer Layout ================================ */

.main-header { padding: 20px; display: table; width: 100%; min-height: 120px; } .main-banner { background: #ebedee; text-align: center; padding: 35px 15px; } .main-logo, .main-nav, .main-nav li { display: inline-block; } .main-logo, .main-nav { display: table-cell; vertical-align: middle; } .main-logo { width:auto; background-repeat:no-repeat; background-size:cover; } .main-nav { padding-left: 50px; } .main-logo, .main-nav li { border-radius: 5px; } .main-nav li { margin-right: 10px; } .main-logo a, .main-nav a { color: white; text-decoration: none; display: block; text-align: center; padding: 10px 20px; } .main-footer { text-align: center; padding: 10px; }

/* Column Layout ================================ */

.col { display: inline-block; padding: 20px; margin-right: -5px; vertical-align: top; } .primary-content { width: 80%; } .secondary-content { width: 20%; }

/* Media Queries ================================ */

@media (max-width: 768px) { .main-logo, .main-nav, .main-nav li, .col { display: block; width: initial; height: initial; margin: initial; } .main-nav { padding-left: initial; } .main-nav li { margin-top: 15px; } .main-banner { display: none; } }

Kelly von Borstel
Kelly von Borstel
28,878 Points

In your css, in .main-header, try deleting display: table and min-height: 120px

Kelly von Borstel
Kelly von Borstel
28,878 Points

Actually, I think you only need to delete display: table. You can leave the min-height if you want.

I took a look. I think your media query might be messing with it? Because that's the only time you have an issue. Try commenting out the .main-logo selector and see if that works? Maybe separate it out and try floating it left in your media query?

Well removing the display:table worked (ish) my Logo has now appeared but my 4 links are starting under the Logo image and not aligning to the right of image (or left on page). Cant get them to wrap beside

Do you want them to align all the way to the right?

To be honest anywhere but under my logo unless its in a small resolution such as a mobile device. but when viewing your average full screen webpage I would like them just to the right of the img or all the way to the right end of the webpage. Keeping in mind when the screen size is reduced it goes to responsive. If that makes any sense

Kelly von Borstel
Kelly von Borstel
28,878 Points

In your css, make a rule for ul.main-nav and add float: right.

I would like to thank you too for your help in advance.

also the ul.main-nav does float it right, but then page links dont go under the log when I resize

Kelly von Borstel
Kelly von Borstel
28,878 Points

In a media query that targets smaller screens, you can add rule for ul.main-nav with float: none.

I'd actually approach the media query a little differently—serve the mobile version first, then float it right using a (min-width: 768px) instead of a max width. The devices with less oomph won't have to work as hard if you do that because the simplest code is all they'll have to pay attention to. Then that should take care of the links not responding the way you like, because the default will have them displaying as block elements under the logo.