Solved

Adding PNG IMage to Twitter Bootstrap header

Posted on 2014-03-26
2
4,525 Views
Last Modified: 2014-03-26
I've recently used Twitter Boostrap has a base for my design for my web application.  Unfortunately, as with any framework including CSS, it comes with a learning curve.  I have been tasked with adding a background image to the bootstrap header but unfortunately, it does not stretch enough to cover the header.  So for the nav header section, if I were to add the following code:

.navbar.navbar-inverse.navbar-fixed-top{
    background-color:black;
    position:static;
    height:100px;
    

}

Open in new window

the header appears fine.  But if I were to add the following code:

.navbar.navbar-inverse.navbar-fixed-top{
    background-image:
    position:static;
    height:100px;   
}

Open in new window


it doesn't look good.  The png image doesn't stretch to be the full height of the header.  How do I fix this?  Thanks!
0
Comment
Question by:VBBRett
2 Comments
 
LVL 8

Accepted Solution

by:
soupBoy earned 500 total points
ID: 39956548
I don't know if this would work as I haven't toyed with Bootstrap much, but have you tried adding 'background-size: cover;'?

Example:
.navbar.navbar-inverse.navbar-fixed-top{
    background-image: yourPnghere.png
    background-size: cover;
    position:static;
    height:100px;  
}

If you could provide a link of the broken version (with png file not stretched) it would be helpful to debug...

- Chris
0
 

Author Comment

by:VBBRett
ID: 39956571
WHOA!  That worked, awesome!  500 points for you!
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Ajax control editor 4 37
logo getting cutoff on ipad 30 87
Location of Javascript on HTML page 3 26
HTML page and JavaScript 2 56
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now