Solved

Adding PNG IMage to Twitter Bootstrap header

Posted on 2014-03-26
2
4,539 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jQuery Animation faster 5 43
AngularJS Page Control Understanding 5 40
Problem with a CSS in a page 2 27
HTML Relative path 9 29
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

862 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

21 Experts available now in Live!

Get 1:1 Help Now