Geek Answers Handbook

Launching the background image below the Twitter navigation bar

Relative CSS / boot newbie.

I spent some time trying to get a background image for integrating with Twitter Bootstrap using the first method of this CSS Tricks page . I ended up using "body" as a CSS tag because HTML just ... didn't work. While everything works fine in general, the image starts “behind” the top navigation bar and then continues down, so the top is hidden behind the black navigation bar

I tried using margin-top to align the top of the background image with the bottom of the navigation bar, but it also moves the container and all subsequent content down (obviously, as I put the margin on the full page text).

I also tried to create a unique class for the background image and placed the div right in the body tag and closed the div right in front of the html close tag, but once again setting it up adjusts the whole page and not just the background image.

Moving the div for the background image below the navigation bar limits it to the active space of the "container", so the background image now exists only in the middle of the screen.

body { background: url(../images/height-chart500w.png) repeat-y fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: 15%; }

Given the properties of changing the background image, the hacker’s decision to simply change the image to create space at the top will obviously not work. How is CSS that the background image is below the navigation bar?

+4
source share
3 answers

Use the background position. It takes two values: one for the x axis, the other for the y axis. In your case, it will be something like:

background-position: 0 Y; where Y will be the height of the navigation bar.

+6
source

Late party, but thanks to this answer, I got my page to display as I wanted, this is my CSS code. hoping to help any newbie

 header.masthead { position: relative; width: 100%; min-height: auto; text-align: center; color: white; background-image: url("../img/testimage5.jpg"); background-position: center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } @media (max-width: 992px) { header.masthead { position: relative; width: 100%; height: 100%; text-align: center; color: white; background-image: url("../img/testimage5.jpg"); background-position: 0 20px; background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: 100% 100%; } }
+1
source

I checked the blog www.builtwithbootstrap.com for examples, and it seems that this person is using this: www.1in5photo.com

 body { position: relative; padding-top: 20px; background-color: black; background-image: url(../img/grid-18px-masked.png); background-repeat: repeat-x; background-position: 0 40px; }
0
source

More articles:


All Articles