background-image property is not showing the image in css - html

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

Related

div Background Image Cutted

I defined with background image as following.Html:
<body onload="myFunction()">
<h4>Entities Presenter</h4>
<div class="bg">
<canvas id="my-canvas" class="canvas"></canvas>
</div>
</body>
CSS:
body,
html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("wp2753284.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
But the background image after definitions above displayed cutted ( from top and bottom), Is there something wrong in the definition ? Thanks in advance
instead of background-size: cover;
try background-size: contain;

How Can I cut img background and disable default responsive behavior?

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;
}

background image not taking up full width

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

Making an image scale down when window resize

I have a background image set as a background, and I want it so, when the user scales down the window, it will resize with it:
HTML:
<div class="parallax">
</div>
CSS:
.parallax {
background-image: url("../Images/back1.jpg");
min-height: 700px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 100px 20px;
}
I got it to work when I changed background-size: cover; to contain, but it cuts out some of the image from the left and right side.
Fiddle Link : here
In addition to my comments, here is what I wrote about in the last comment - a regular img tag with width: 100%and height: auto instead of a background-image:
img {
width: 100%;
height: auto;
}
<div>
<img src="https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg">
</div>
The code below makes the background image responsive too when a window is resized. I have updated your css code, removed min-height and background fixed and made the padding percentage in top and bottom.
.parallax {
background: url(https://wallpaperscraft.com/image/coffee_hand_glass_scarf_113704_1366x768.jpg) no-repeat center / cover;
padding: 30% 0;
}
<div class="parallax">
</div>

Full Width CSS - Responsive

I have a background image that I would like to fill the width of the (responsive) page. I.e. if the page is huge, the width of the image is also huge. However if the width shrinks down the image is cropped rather than scaled (because I want the height to stay the same, i.e. no white space anywhere).
I have most of it working, except filling the width.
Here is my jsfiddle: https://jsfiddle.net/jwdyc1rh/
HTML:
<body class=" cms-index-index cms-home">
<div class="main-container col1-layout">
<div class="main">
</div> <div>
</div>
CSS:
body.cms-home .main-container {
margin-top: -20px;
background-image: url(http://www.mrwallpaper.com/wallpapers/flower-field-summer-1280x1024.jpg);
background-repeat: no-repeat;
min-height: 1024px;
background-position: center;
width: 100%;
}
Kind of hard to see without stretching the screen huge, but you can see the white background if it's stretched, rather than the image scaling to fit.
A perfect example of this working how I want is www.prada.com but I can't seem to work out the right code.
Use background-size: cover;
jsfiddle
Apply background size like background-size: 100% 100%;
It will do the trick.
body.cms-home .main-container {
margin-top: -20px;
background-image: url(http://www.mrwallpaper.com/wallpapers/flower-field-summer-1280x1024.jpg);
background-repeat: no-repeat;
min-height: 1024px;
background-position: center;
width: 100%;
background-size: 100% 100%;
}
Updated Fiddle
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;