Вопрос:

CSS Background image cut off by li

html css twitter-bootstrap

277 просмотра

5 ответа

18 Репутация автора

The following code will load a background image that is cut off or covered by the ul/li's

This only occurs with bootstrap. I have it on jsfiddle without bootstrap:https://jsfiddle.net/kng2upm1/ with bootstrap:https://jsfiddle.net/kng2upm1/1/

HTML

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="index.html"><img src="images/logo.png" alt"Logo"></a>
    </div>
    <div>
      <ul class="nav navbar-nav">
            <li> <a href="">Git Hub</a>
            <li> <a href="">Game Vote Alpha</a>
            <li> <a href="">Minecraft Server</a>
        </ul>
    </div>
    </div>
</nav>
<h1>File Directories</h1>
<ul id="filelist">
    <li> <a href="">TV Shows</a>
    <li> <a href="">Movies</a>
    <li> <a href="">Music</a>
    <li> <a href="">Audio Books</a>
    <li> <a href="">Games</a>
    <li> <a href="">Pen and Paper RPG Scans</a>
</ul>
</body>

CSS

#filelist{
    list-style-type: none;
}

html{
  background-image: url("image");
  background-repeat: no-repeat;
  background-size: 500px auto;
  background-attatchment: fixed;
  background-position: right;
}
Автор: Jeremy T Источник Размещён: 22.08.2016 09:29

Ответы (5)


0 плюса

196 Репутация автора

Add background to body tag (inline css)

<body background="http://67.media.tumblr.com/9c2cc013377eef3aa10cf4859c38349f/tumblr_nlbiqoxbtv1qlhoglo1_500.png">

Bootstrap might be overriding your background...

Автор: Arjun Размещён: 22.08.2016 09:36

1 плюс

26 Репутация автора

Решение

Bootstrap adds a background-color: #fff to the body, since you are applying the image to the HTML element, try changing your css to put the image on the body element.

https://jsfiddle.net/Lgd2d99h/

Автор: Andrew Jaswa Размещён: 22.08.2016 09:37

0 плюса

331 Репутация автора

Your bootstrap containers were all messed up. You had the background just in one of the nested elements. You should put your background element into the largest containing parent element for the best effect.

HTML:

      <ul class="nav navbar-nav">
            <li> <a href="https://github.com/damphon">Git Hub</a>
            <li> <a href="http://gn.jeremytoler.net">Game Vote Alpha</a>
            <li> <a href="http://mc.jeremytoler.net">Minecraft Server</a>
        </ul>



<h1>File Directories</h1>
<ul id="filelist">
    <li> <a href="/TV">TV Shows</a>
    <li> <a href="/Movies">Movies</a>
    <li> <a href="/Music">Music</a>
    <li> <a href="/AudioBooks">Audio Books</a>
    <li> <a href="/Games">Games</a>
    <li> <a href="/RPG">Pen and Paper RPG Scans</a>
    <li> <a href="/EduVid">Programing Videos</a>
</ul>
    </div>
</body>

CSS:

#filelist{
    list-style-type: none;
}

html{

}

.container-fluid{
      background-image: url("http://67.media.tumblr.com/9c2cc013377eef3aa10cf4859c38349f/tumblr_nlbiqoxbtv1qlhoglo1_500.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-attatchment: fixed;
  background-position: right;
}
Автор: wdfc Размещён: 22.08.2016 09:38

0 плюса

12792 Репутация автора

This is something Bootstrap is adding to your body tag. You can override it by using:

body{
  background-color: initial;
}

Make sure your CSS file is referenced after Bootstrap's.


html {
  background-image: url("http://67.media.tumblr.com/9c2cc013377eef3aa10cf4859c38349f/tumblr_nlbiqoxbtv1qlhoglo1_500.png");
  background-repeat: no-repeat;
  background-size: 500px auto;
  background-attachment: fixed;
  background-position: right;
}
body {
  background-color: initial !important;
  /* !important to force Code Snippet to use this value.*/
}
#filelist {
  list-style-type: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="index.html">
          <img src="images/logo.png" alt="Logo">
        </a>
      </div>
      <div>
        <ul class="nav navbar-nav">
          <li> <a href="https://github.com/damphon">Git Hub</a>
            <li> <a href="http://gn.jeremytoler.net">Game Vote Alpha</a>
              <li> <a href="http://mc.jeremytoler.net">Minecraft Server</a>
        </ul>
      </div>
    </div>
  </nav>
  <h1>File Directories</h1>
  <ul id="filelist">
    <li> <a href="/TV">TV Shows</a>
      <li> <a href="/Movies">Movies</a>
        <li> <a href="/Music">Music</a>
          <li> <a href="/AudioBooks">Audio Books</a>
            <li> <a href="/Games">Games</a>
              <li> <a href="/RPG">Pen and Paper RPG Scans</a>
                <li> <a href="/EduVid">Programing Videos</a>
  </ul>
</body>

Автор: Ricky Размещён: 22.08.2016 11:30

0 плюса

18021 Репутация автора

Don't style the HTML tag...

....style the body tag.

The HTML tag should never be styled for visual changes.

Merely changing your CSS to apply to the body tag rather than the HTML tag corrects this issue.

Fiddle update

(there are also markup errors in your html)

Автор: Scott Размещён: 22.08.2016 11:40
Вопросы из категории :
32x32