I've been trying to figure this out for awhile now. Trying to use css to add a background image. I'm also using bootstrap. Here is my code
css:
.container-fluid{
background-image: url('../DomPic/photo1.jpg');
height: 100%;
width: 100%;
}
html:
<div class="container-fluid"></div>
Problem:
The image wont show up on my page.
It is because your div have nothing.
<div class="container-fluid">Something</div>
Either add something in div.
Or
Give fixed width and height. Or at least fixed height works.
.container-fluid{
background-image: url('../DomPic/photo1.jpg');
height: 100px;
width: 100px;
}
Add position:absolute; to the .container-fluid class..
Its simple as that..
Note:Adding something to the div makes the background to fit according to the content of the div.
try this one:
.container-fluid{
background-image: url('http://s13.postimg.org/51s3l0x3b/w3schools.png');
background-repeat: repeat-y;
height: 100%;
width: 100%;
}
DEMO HERE
.container-fluid{
position:absolute;
background-image: url('DomPic/photo1.jpg');
height: 100%;
width: 100%;
}
added position:absolute; to existing code
It appears your path to the your picture is wrong.
You dont need to set you path as C:....
just
background-image: url('just ../assets/img.piture.png or ./picture.png or picture.png');
Depending where your pictures is place in your project.
ex.
myproject/assets/images/picture.png.. etc.
the example below works.
.container-fluid{
background-image: url('http://www.fillmurray.com/100/100');
height: 100px;
width: 100px;
}
<div class="container-fluid"></div>
try to use in your style may help you
.container-fluid
{
position:absolute;
background-image: url('DomPic/photo1.jpg');
height: 100%;
width: 100%;
background-size:contain;
}
Rather was the wrong way Image. Please check again.
background-image: url('folder/picture.jpg');
Related
Good evening,
I'm very new to html and was searching for a solution but I did not found any. So what I'm trying to do is to fix the background and put something like a panel over it, where I do the rest of the site like text etc. I have an example website: https://420cheats.com
I don't know if I am right but I think I have to add a second class and put this somehow over the background
Thanks in advance.
Ps: I did the background as a class in the css file.
You can just set a fixed background-image on your body element. Both the <body> and <html> tag need a set height of 100% for this to work.
body, html {
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://cdn.cnn.com/cnnnext/dam/assets/170407220921-07-iconic-mountains-pitons-restricted.jpg');
height: 100%;
background-attachment: fixed;
}
.content {
background-color: rgba(204,204,204,0.5);
width: 80%;
margin: 20px auto 20px auto; /* top right bottom left */
height: 1500px; /* remove this, just here to show that it works */
}
<div class="content">
<h1>Content</h1>
</div>
You will need to set the background as fixed and create a DOM element to lay on top of your background image.
body {
background: url('https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1507062474/hotel-everest-namche-nepal-mountain-lodge-MOUNTAIN1017.jpg?itok=g-S4SL9n') no-repeat fixed;
background-size: cover;
}
div {
padding: 20px;
width: 400px;
height: 1200px;
background: rgba(0,0,0,.5);
}
<div>test</div>
I am new to html/css and I do not understand why my background image is not showing up. This is part of a simple test CSS sheet and HTML code for a simple site. I am trying to add a background-image and I have done this once and it worked and I do not know why it does not work now.
.timeline{
width: 100%;
height: 400px;
display: inline-flex;
background-image:url("img/back.jpg");
}
Your rule is wrong. You are trying to set background-image, background-position and other rules, but rule name is only background-image.
Use background instead of background-image
Your syntax for background-image is incorrect
You need to use background-repeat: repeat; for repeat. Here is doc background-image
.timeline{
width: 100%;
height: 400px;
display: inline-flex;
background-image:url("img/back.jpg");
background-repeat: repeat;
}
Try replace this code
display:inline-flex;
to this code
display:flex;
This works. Asuming your file path is correct.
.timeline{
width: 100%;
height: 400px;
display: inline-flex;
background-image: url(img/back.jpg);}
.timeline{
width: 100%;
height: 400px;
display: inline-flex;
background-image:url("./img/back.jpg");
}
Hey there I am building a website! I'm trying to make the background-image to fit the whole div.section. I tried height: 100%; width: 100%; but it did not work. I need some help.
The part of the code which needs to have the background image:
.section {
background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat center/cover;
height: 100%;
width: 100%;
}
My complete code on JSFiddle: https://jsfiddle.net/2Lqxqw10/ (Make sure to make the width of the result maximum) or another link: https://mahalakshmi-consultants-shreyas1703.c9users.io/index.html
Thank You in Advance!
You can use absolute position with a proper z-index, it could also works :
.section {
background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat center/cover;
height: 100%;
width: 100%;
position: absolute;
top: 0;
z-index: -1;
}
See it here
Width and height set the proportions of your div. To set the size of the background, you need the css property background-size:
.section {
background-position: 0 0; // start from top left
background-size: 100% 100%; // expand to 100% in both directions
}
You need to set a certain height to your section e.g :
.section {
background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat center/cover;
height: 500px;
width: 100%;
}
fiddle
Currently .section is null or no data in it
put some data in it or give some specific height to the .section to view section
Add position absolute to the .section class.
.section {
background: url("http://i.imgsafe.org/50f3f94.jpeg") no-repeat center/cover;
height: 100%;
width: 100%;
position absolute;
}
https://jsfiddle.net/2Lqxqw10/6/
I am trying to fit image into div. But somehow image is not fitting. Take a look at div called as node2
I have put below properties to image
img {
max-width: 100%;
max-height: 100%;
}
Here is my Fiddle
Instead of using max height and width, try using regular:
img {
width: 100%;
height: 100%;
}
I also noticed in your fiddle, under CSS you had the following:
object-fit: contain;
You need to remove this as well.
Both of which will stretch the image both vertically and horizontally across the whole of the div.
I think you need this:
img {
float: left;
object-fit: fill;
width: 100%;
}
and if you do not want to strecth your image then please add following css also:
#node2 {
height: auto;
width: 255px;
}
Please find fiddle demo here.
if you want it 100% x 100% then, do it as background image of your div:
div{
background-image: url('../images/yourimage.jpg');
background-position: 0% 25%;
background-size: cover;
background-repeat: no-repeat;
}
I have the following code:
.container {
width: 1rem;
height: 2rem;
background-image: url(https://dl.dropboxusercontent.com/u/1142760/static/svg/triangle.svg);
background-size: 100% 100%;
border: 1px solid black;
}
<div class="container"></div>
I expect the background image of the div to be stretched to the full width and height of said div.
Firefox behaves as expected:
But Chrome appears to have a bug that makes it interpret background-size differently:
You can see the live result in this fiddle
Re-creating the background image would not be a solution, as the div in question is of variable height.
Is there a work-around for this Chrome bug?
Maybe someone will find this post and not find the right answer.
I found out that in my case, i had to add an attribute to my svg File:
<svg preserveAspectRatio="none" ...
Well, maybe not the best solution, but at least it works fine for me in Chrome.
But you have to set the height (transform-scale) of the inner div with JQuery, according to your browser on load. Not really nice, but it works.
Also watch out for the -webkit-background-size.
As you can see, a lot of problems.
HTML:
<div class="container"><div id="picture"></div></div>
CSS:
.container{
width:1rem;
height:2rem;
border:1px solid black;
}
#picture {
width: 100%;
height: 100%;
background-image:
url(https://dl.dropboxusercontent.com/u/1142760/static/svg/triangle.svg);
-webkit-background-size: 100%;
-webkit-transform: scale(1,2);
}
http://jsfiddle.net/y0j5tejw/3/
Try this css for your code, it will definitely resolve your query.
.container{
background-image: url(https://dl.dropboxusercontent.com/u/1142760/static/svg/triangle.svg);
background-size: 100% 100%;
border:1px solid black;
float: left;
background-repeat: no-repeat;
width: 5%;
height: 30px;
}