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");
}
Related
Prerequisites
The object-fit: cover; I set as the main visual does not work!
Here is a screenshot of the site in production.
Expected value
I would like to set the main visual to look like the one in the link below.
https://code-step.com/demo/html/profile/
Reproduction procedure
Run the code below, please.
<div id="main">
<div class="main__mainvisual">
<img class="main__mainvisual-image" src="image/mainvisual (1).jpg" alt="メインビジュアル">
</div>
<div>
#main {
.main_mainvisual {
margin-bottom: 80px;
img {
width: 100%;
max-width: 1920px;
height: 600px;
object-fit: cover;
}
}
}
Here is a solution with pure CSS. You can use these styles as either an inline image like your current structure. OR, you can use it as a background-image which is what I suggest. I personally prefer less markup. This gives you the ease of customization and allows you to easily put other elements on top if need be.
Once you declare the size of your div or image (sizes taken from the website) then you can set the image to the background in CSS. Then, to get the bicycle to actually display nicely in this constricted width and height, you can use background-position: center;
.mainvisual {
width: 100%;
background-image: url('https://code-step.com/demo/html/profile/img/mainvisual.jpg');
max-width: 1920px;
height: 600px;
background-position: center;
}
#main {
display: block;
}
<div id="main">
<div class="mainvisual"></div>
<div>
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'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');
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;
}