Place css images in mediaqueries

Asked

Viewed 51 times

0

Guys I’m developing a site in bootstrap and when putting the logo it only works in html and not css, but what I find strange is that only the logo no funf, already all styles this good!

html file

css file

@media (min-width: 1024px) {    
    .navbar-brand {
        width:      150px;
        height:     150px;
        background-color: yellow; /* somente para debugar */
        background-image: url(imgs/logo.png);
}
css twitter-bootstrap front-end

  • I’d need your html to run some tests.

  • 3

    There is a syntax error, close class keys...

2 answers

0

Checks where the image is and where your CSS file is, depending on how your files are arranged, the CSS and HTML link will be used in different ways.

To access files that are in previous folders you must use the notation ../

You have this structure:

seu-projeto/
    index.html
    imgs/
        logo.png
    css/
        style.css

To access the HTML image will be:

imgs/logo.png

Already from CSS, the link will be this:

../imgs/logo.png

0

Supposing you want the image your logo be responsive I advise you to add a .img-responsive class to <img> tag. So the image will then scale well for the parent element by adjusting to screen sizes.

See more information in the official documentation http://getbootstrap.com/css/#images-Responsive

A real example for greater understanding.

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid"></div>
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    <a class="navbar-brand" href="#"><img src="images/logo.png"width=200px" class="img-responsive" alt="Logo">
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="/">Home</a></li>
    <li><a href="~/About/Index">About</a></li>
    <li><a href="~/Contact/Index">Contacts</a></li>
    </ul>
  </div>

</nav>

Browser other questions tagged css twitter-bootstrap front-end

You are not signed in. Login or sign up in order to post.