CSS background image is not showing.
This is my html code:
<div class="container-fluid p-c b-g">
<div class="row">
<div class="col-sm-12 text-infom">
</div>
</div>
</div>
</div>
css code
.b-g{
background-image: url(../images/bg/trading.jpg);
width: 100%;
}
add some height to div it'll show
.b-g{
background-image: url(https://pbs.twimg.com/profile_banners/1285511592/1470391779/1500x500);
background-size: contain;
background-repeat: no-repeat;
height: 300px;
}
<div class="container-fluid p-c b-g">
<div class="row">
<div class="col-sm-12 text-infom">
</div>
</div>
</div>
May be your keeping file path is wrong, check file loading or not by inspect in browser.
<style type="text/css">
.b-g {
background-image: url("http://tipsforbeauties.com/gallery_gen//5c5f13b27a80afa16ca4184aec9a26c1_324.7619047619x220.jpg");
width: 100%;
}
</style>
<div class="b-g">
</div>
For fit image to background (element, body or whatelse):
.b-g {
padding: 0px;
background-image: url(../images/bg/trading.jpg);
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
Or you can add background-size property (remove width property).
background-size: 100% 100%;
And last one you can use like this:
background-image: #000 url('../images/bg/trading.jpg') repeat center center;
Related
<div id="Image">
<!-- <img src="https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80" alt="Diagonal Stripes"> -->
</div>
#Image {
background-image: url("https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80");
background-repeat: repeat;
}
I've made this code and/but I don't see any image. Why is that?
add dimensions / content to the div. it has no size so the image can't be seen. ( eg. width: 200px; height: 800px)
You may also want to have a look at background-size, here.
#Image {
background-image: url("https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80");
background-size: contain;
width: 800px;
height: 200px;
background-repeat: repeat;
background-color: gray;
}
<div id="Image">
<!-- <img src="https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80" alt="Diagonal Stripes"> -->
</div>
Here is two solutions:
#Image {
background-image: url("https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80");
background-repeat: repeat;
width:100;
height:100;
background-size: contain;
}
img {
width:100;
height:100;
}
<div id="Image">
First solution - This is not a good solution because the img could not be zoomed even using scale:0.11;
</div>
<img src="https://images.unsplash.com/photo-1671742225244-ee282feb769d?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODc3NDY&ixlib=rb-4.0.3&q=80" alt="Diagonal Stripes">
<!--Second solution:Using img and this is good-->
I have some simple HTML and CSS code where I want to have a div with class container and this div need to have a img as background. Inside that parent div I have a dive with class row and inside it I have 2 div classes :class="col-md-3" and col-md-9.
The problem is that now the child divs are not showing container div.
In other words I want my container div be the background and everything is displayed on top of it.
Any suggestions?
HTML:
<div class="container bckgroud">
<div class="row">
<div class="col-md-3">
<h1>here is test for the me</h1>
</div>
<div class="col-md-9"></div>
</div>
</div>
CSS:
body, html {
background-color: #071a0f;
}
h1 {
color: aqua;
}
.bckgroud {
width: 100%;
height: 100%;
background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1));
background-image: url("../images/backg.png");
background-size: contain;
background-repeat: no-repeat;
padding-top: 66.64%;
/* (img-height / img-width * width) */
/* (853 / 1280 * 100) */
}
Actual result:
You mean something like this?
Set your container height: 100vh;
and delete the padding, it pushed the divs to the bottom
#charset "utf-8";
/* CSS Document */
body,hmtl{
background-color: #071a0f;
margin: 0;
}
h1{
color: aqua;
}
.bckgroud{
width: 100%;
height: 100vh;
background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1));
background-image: url("https://cdn.hasselblad.com/c81e7ee74fdc106a965f51b35c8dd87503a16f0e_tom-oldham-h6d-50c-sample1.jpg");
background-size: contain;
background-repeat: no-repeat;
}
<div class="container bckgroud">
<div class="row">
<div class="col-md-3">
<h1>
here is test for the me
</h1>
</div>
<div class="col-md-9"></div>
</div>
</div>
Something like this, perhaps:
body {
background-color: #071a0f;
}
h1 {
color: aqua;
}
.bckgroud {
height: 100vh;
background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1)), url("https://i.stack.imgur.com/tAAGm.jpg");
background-size: cover;
background-repeat: no-repeat;
}
body, html {
color: white !important;
}
.bckgroud{
background-image: url("https://i.stack.imgur.com/tAAGm.jpg");
background-size: cover;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bckgroud">
<div class="row">
<div class="col-3">
<h1>
here is test for the me
</h1>
</div>
<div class="col-9">
Foo
</div>
</div>
</div>
I want to have a blurry background image for a div container. But if I set the blur filter the edges also will get blurry causing the blurred image to overflow it's frame. This is what I tried till now:
.one {
height: 400px;
width: 400px;
border: 1px solid black;
/* background-image: url("https://i.imgur.com/JCyxUxA.jpg"); */
/* background-repeat: no-repeat;
background-position: center;
background-size: contain;
*/}
.a {
background-image: url("https://i.imgur.com/JCyxUxA.jpg");
}
.b {
background-image: url("https://i.imgur.com/O1jVhYH.jpg");
}
.thing {
object-fit: contain;
width: 100%;
height: 100%;
}
.bl {
filter: blur(20px);
}
<div class="one t">
<img class="thing" src="https://i.imgur.com/JCyxUxA.jpg" alt="">
</div>
<div class="one t">
<img class="thing bl" src="https://i.imgur.com/JCyxUxA.jpg" alt="">
</div>
<!-- <div class="one a">
</div>
<div class="one b">
</div>
-->
Try adding overflow:hidden; to its container (class one in your case).
This will hide every part of the children elements that is overflowing its container
I am facing a simple problem that is taking up a lot of my time.
I have a simple CSS that defines an image as background:
#header-content{
background-image: url("../images/header-img.png");
background-repeat: no-repeat;
background-position-x: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And the div in a HTML page that has this ID:
<!-- HEADER -->
<div id="header">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="header-content">
</div>
</div>
</div>
</div>
</div>
<!-- HEADER -->
Very simple. But the image is not shown. What could be the problem?
P.S.: The image directory is correct.
Your problem could be that the #header-content div doesn't have any size. Try adding: height: 100px; width: 200px
#header-content{
background-image: url("http://unsplash.com/photos/1-ISIwuBMiw/download");
background-repeat: no-repeat;
background-position-x: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100px;
width: 200px;
}
<!-- HEADER -->
<div id="header">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div id="header-content">
</div>
</div>
</div>
</div>
</div>
<!-- HEADER -->
There is no need to set width ( the default for DOVs is 100%), but if you don't have any content in that DIV, you have to set a height value for that DIV to see a background (if not, it's 0px high = not visible).
Set height and width to your #header-content.
Also, when setting the height, try a different measuring unit than percentage(%) because percentage might not work correctly sometimes and it'll make it not to show as well. You can use px or vh.
Because you haven't defined width and height in your css code.
For example, add these width: 400px; height: 400px; to the first of #header-content {}, and it works. you can also do it for body or even HTML tag without using width and height properties.
I am using Twitter Bootstrap and have placed a number of fullscreen background images that were working perfectly. Tonight I added Scrollr to the site and now the background images are all blown up and I can't figure out why?
html
<header id="top" class="header">
<div class="container text-vertical-center">
<div class="row">
<div class="center-block">
<div class="padded" style="border: 1px solid white">
<h1 class="title text-uppercase"><font color="#FFFFFF">Language</font></h1>
</div>
</div>
</div>
<div class="row">
<div class="scroll">
<i class="icon-double-angle-down icon-large"></i>
</div>
</div>
</div>
</header>
css
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background: url(../img/test.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
I have also added height and width to the html and body tags at the top of my css.
html,
body
#skrollr-body {
width: 100%;
height: 100%;
}
Any ideas...?
Sorry, can't to add comment. Can you describe how it looks now? At first look it seems all is well. Maybe try ro change your position for absolute or fixed