I am having trouble setting a background image for bootstrap jumbotrons. My main.css comes after the bootstrap css and I am selecting the jumbotron using a class called "banner" which is in the same div as the jumbotron, but it still doesn't work. Here is my code...
HTML:
<!-- Banner -->
<div class="jumbotron banner">
<div class="container">
<hgroup>
<h1>
Bits king
</h1>
<h2>
Web Design & Development
</h2>
</hgroup>
</div>
</div>
CSS:
.banner {
height: 400px;
width: 100%;
max-height: 50%;
max-width: 100%;
min-height: 20%;
min-width: 30%;
background-image: url("../assets/images/banner.jpeg");
background-size: cover;
}
You can add a background-image property to the .jumbotron class in your custom css file (Make sure you reference your custom css file after Bootstrap. Here's an example:
.jumbotron {
background-image: url("/img/your-image.jpg");
background-color: #17234E;
margin-bottom: 0;`enter code here`
min-height: 50%;
background-repeat: no-repeat;
background-position: center;
-webkit-background-size: cover;
background-size: cover;
}
add "jumbotron-custom" to class attribute and apply this after "bootstrap" css :
.jumdotron-custom
{
background: url('/*background url*/') no-repeat !important;
}
..or just add !important to your 'background-image' of css.
Good Morning. Try this:
background-image: url("../assets/images/banner.jpg");
Let me know if it works or not?
Related
How can I disable responsive background img behavior ?
My background img in larger screen is like this :
And I want this behavior when I resize screen (small screens). (I want that the img will be cut automatically) : does a css property exist for this ?
My code is :
.bg {
background-image: url(assets/images/bg.png,
background-repeat: no-repeat;
}
<div class="container-full bg">
<div class="container">
<div>My content....</div>
</div>
I am in bootstrap project , and my background img is responsive, how can I disable this please ?
here is a quick cutout. You can position the image left, center or right. The image will be trimmed automatically.
You can define the height for yourself.
body {
margin: 0;
}
.bg {
background-image: url("https://i.stack.imgur.com/jtaEI.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
height: 400px;
}
<div class="bg">
<div>My content....</div>
</div>
edit
Please be aware that you need semicolons in .css after each declaration
your code:
.bg {
background-image: url(assets/images/bg.png,
background-repeat: no-repeat;
}
need to look like this:
.bg {
background-image: url("assets/images/bg.png");
background-repeat: no-repeat;
}
I was trying to put background image but it is not showing.
.jumbotron{
background-image: url("/src/assets/shop1.png");
background-size: cover;
}
<div class="jumbotron">
Welcome to Home Page
</div>
The background image will look at the height and width of the div. Please follow the code to see the image.
.jumbotron {
background-image: url('https://imgsv.imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg');
background-size: 100% 100%;
height: 100px;
width: 100%;
background-repeat: no-repeat;
}
Working demo
I've divided my web page to left and right container(it's working fine). I made new class in div called "user-cover-container" and it only needs to put cover image on the top left side of the page.
Image is in the same folder as css and HTML file. HTML and css files are merged correctly.
.user-cover-container{
height: 200px;
width: 100px;
background-image: url("bck.jpg");
background-size: cover;
}
<div class=”user-cover-container”> </div>
Please check the inverted commas for class attribute in HTML. Change them to - " "
.user-cover-container{
height: 200px;
width: 100px;
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTlhiyjToS4vgqPDf_ip_MdI8B7RKbfOlCCLsb9qH8d1PPN-rj5TA");
background-size: cover;
}
<div class="user-cover-container"> </div>
you have missed the "". add this to your code.
<div class="user-cover-container">test </div>
.user-cover-container{
height: 200px;
width: 100px;
background-image: url("https://www.w3schools.com/w3css/img_forest.jpg");
background-size: cover;
color: white;
}
<div class="user-cover-container">test </div>
The background image is not working while I set the option to 100%.
I'm using angular and bootstrap 4.
<!--html code-->
<div class="bg">
<div style="text-align:center">
<h1>
Welcome
</h1>
</div>
<router-outlet></router-outlet>
this is the .scss code
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("~/assets/jonatan-pie-226805-unsplash.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
I copied your code and added a picture and it works below.
Are you using anything that would implicitly keep the background small? Maybe a bootstrap?
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("https://www.placecage.com/g/1000/500");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!--html code-->
<div class="bg">
<div style="text-align:center">
<h1>
Welcome
</h1>
</div>
<router-outlet></router-outlet>
I am currently positioning a background image that is small in height but large in width to stretch all the way across the browser. I am only able to achieve this when I do background size cover, but not when I set a certain size to the image other than cover. I tried background repeat-x but that does not seem to work either.
<html>
<body>
<div class="background">
<div class=“header”></div>
//some content
</div>
<footer><footer/>
</body>
</html>
CSS
.background {
background-image: url(some image);
background-size: //tried cover and it works but not when I set it to width 100% or something like 2800px
background-repeat: repeat-x;
background-position-y: bottom;
}
html, body, .background {
height: 100%;
}
Just add background-size: cover code in css will resolve the issue.
.background {
background-image: url(some image);
background-size: cover;
background-repeat: repeat-x;
background-position-y: bottom;
}
html, body, .background {
height: 100%;
}
It is working with background-size:100%;
.background {
background-image: url("marakele-elephant1.jpg");
background-size: 100%;
background-repeat: no-repeat;
background-position-y: bottom;
}
html, body{
height: 100%;
}
body {
background-image: url(http://ppcdn.500px.org/75319705/1991f76c0c6a91ae1d23eb94ac5c7a9f7e79c480/2048.jpg) ;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
}
div, body{
margin: 0;
padding: 0;
}
.wrapper {
height: 100%;
width: 100%;
}
<div class="wrapper">
<div class="message"></div>
</div>
Not very related to this question but I hope this answer will save someone's time
For the people who are using bootstrap. Keep the image inside a container, check again if it is inside class="container", I had a typo, I wrote classs instead of class and the background image wouldn't fit.
Second, close previous divs.
Third, if you don't use container and start with just <div class='row'></div>, background image won't fit.
Working Example:
<div class="container" style="background-image: url('img'); background-size: cover;">
<div class="row">
</div>
</div>
I'm curious if the CSS unit vw (view width) will accomplish what you are trying to do with width: 100%
Instead of width: 100%, try width: 100vw
https://www.w3schools.com/cssref/css_units.asp