10888

Bootstrap CSS/HTML background image resize

Using bootstrap when I resize my browser, the picture that is in the background shrinks and the background color doesn't.

Here is the link to the site which contains the HTML code: http://codedifferently.com/crest.html

Here is the CSS code that I used:

@charset "UTF-8";

/* CSS Document */


/* Move down content because we have a fixed navbar that is 50px tall */

body {
  padding-top: 0px;
  padding-bottom: 20px;
}

div.jumbotron {
  background-image: url('img/chicago2.jpg');
  background-color: #3FF;
  background-size: 100%;
  height: 500px;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
}

div.navbar navbar-default navbar-static-top" role="navigation {
  border: 0px;
}

    

Answer1:

If I understand correctly, not sure, because the background-color do <strong>NOT</strong> shrink, but I think you mean that your Image should resize and the color should <strong>NOT</strong> appear like when it is now in full view. So If understand that correctly.

Change this:

background-size: 100%;

to

background-size: cover;

and add the browser's vendors to make it cross browser:

-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover;

See more info about <strong>background-size</strong>

Answer2:

Your problem comes from your line background-attachment: fixed;. Which makes the background fixed when scrolling, and the background-position is relative to your window. So in the end, your background is centered relatively to your window, not your jumbotron.

see CSS problem with background-attachment:fixed;

<strong>Edit</strong>: I prefer @dippas's solution.

Recommend

  • Exporting from ColdFusion to Excel, how to modify Page Setup?
  • Images getting cut off in Outlook 2007/2010
  • Error in Firefox when making SQLite calls via Javascript
  • How can I have Brand and Navbar on separate lines?
  • How to render flexdashboard from the command line?
  • Matlab: 3D stacked bar chart
  • Leaflet map not sizing to dimensions of target element
  • How an included partial insert code into parent's block?
  • What is this strange character in chrome's resource css viewer?
  • is it possible to insert a line break in this tooltip?
  • Is there any way to call saveCurrentTurnWithMatchData without sending a push notification?
  • Reading space separated values file in c++ error
  • Python PIL to extract number from image
  • Outputting SharePoint Hyperlink Column as URL
  • Angular2 - Template reference inside NgSwitch
  • Disable Kendo Autocomplete
  • How to view images from protected folder with php?
  • How Lists (specifically, RecyclerView with CardViews) in Android work
  • Chart.js Multiple dataset
  • Alternative To body {overflow:scroll;} That Will Prevent Page Jostling/Wriggling?
  • How do I get HTML corresponding to current DOM tree?
  • Custom validator control occupying space even though display set to dynamic
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • Play WS (2.2.1): post/put large request
  • $wpdb not working in file of WordPress plugin
  • Change multiple background-images with jQuery
  • How to rebase a series of branches?
  • Insert into database using onclick function
  • Encrypt data by using a public key in c# and decrypt data by using a private key in php
  • RectangularRangeIndicator format like triangular using dojo
  • Align navbar back button on right side
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • Change an a tag attribute in JavaScript based on screen width
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • InvalidAuthenticityToken between subdomains when logging in with Rails app
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API
  • How to Embed XSL into XML