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>
Related
I'm trying to create a horizontal slideshow using flexbox. I added min-width: 100% for the contained images so that overflow could actually work on the container. The sizing is perfect, the horizontal scrollbar appears on the container, but the first image is missing. Here is my HTML:
<body>
<div class="slideshow">
<div class="slideshow-item"></div>
<div class="slideshow-item"></div>
<div class="slideshow-item"></div>
</div>
</body>
And here's the CSS:
.slideshow {
width: 100%;
height: 500px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
overflow: auto;
}
.slideshow-item {
min-width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.slideshow-item:nth-of-type(1) {
background-image: url('./images/mountain1.jpg');
}
.slideshow-item:nth-of-type(2) {
background-image: url('./images/mountain2.jpg');
}
.slideshow-item:nth-of-type(3) {
background-image: url('./images/mountain3.jpg');
}
The weird part is if I add two additional slideshow-items in front the original three, it works perfectly. Here's the code after adding the two images:
<body>
<div class="slideshow">
<div class="slideshow-item"></div>
<div class="slideshow-item"></div>
<div class="slideshow-item"></div>
<div class="slideshow-item"></div>
<div class="slideshow-item"></div>
</div>
</body>
I only added background images for the last 3 items, since those are the ones that are actually displayed:
.slideshow-item:nth-of-type(3) {
background-image: url('./images/mountain1.jpg');
}
.slideshow-item:nth-of-type(4) {
background-image: url('./images/mountain2.jpg');
}
.slideshow-item:nth-of-type(5) {
background-image: url('./images/mountain3.jpg');
}
Any help would be much appreciated!
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;
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'm trying to create a simple HTML page. Now, I'm trying to add bg-image / color. So I have this simple html tag:
<html>
<style type="text/css">
.header {
height: 100px;
}
.kontent1 {
height: 50px;
margin-top: 10px;
}
.kontent2 {
height: 50px;
margin-top: 10px;
}
</style>
<div class="bgheader"></div>
<div class="header">HEADER</div>
<div class="kontent1"> KONTENT </div>
<div class="bgfooter"></div>
<div class="kontent2"> KONTENT</div>
<div class="footer">FOOTER</div>
</html>
So, what I want to achieve is something like this:
How can this be achieved?
UPDATE
I'm have tried this:
body{
background:
url('<?=base_url();?>/assets/header_bg.png')no-repeat 100px -30px,
url('<?=base_url();?>/assets/footer_bg.png')no-repeat 0px 96%;
background-size: contain;
max-height:80%;
padding-top: 20px;
margin-bottom:10px;
}
but it's not responsive, because when the page height change, the backgrounds are broken.
You can use the below code for adding 2 images in div:
background-image: url(image1.png), url(image2.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
You can go though the below links for better understanding:
http://www.css3.info/preview/multiple-backgrounds/
https://www.w3schools.com/css/css_background.asp
You can use background-color to achieve background color and background-image for image as background on these containers. As you have two different containers, its better approach to background them separately instead of using background on body or parent div.
You can try something like this,
.header-container, .footer-container {
width: 200px;
height: 200px;
border: 2px solid black;
text-align: center;
text-transform: uppercase;
}
.header, .content {
min-height: 100px;
}
.header-container {
background-color: #DD3388;
}
.footer-container {
background-color: #33DD44;
}
<html>
<head>
</head>
<body>
<div class="header-container">
<div class="header"> Header </div>
<div class="content"> Content </div>
</div>
<div class="footer-container">
<div class="content"> Content </div>
<div class="footer"> Footer </div>
</div>
</body>
</html>
I thought making my parallax CSS only would make things less laggy, but seems not. If you wanna check out the code and tell me if there's something done poorly, I'd be thankful.
the html:
<div class="parallax">
<div id="up">
<div class="spacer"></div>
<div id="intro">
<h1>A studio made up of </h1>
<h2 class="future-animate"> 1</h2>
<div class="animate"></div>
<h1> person,</h1>
</div>
<div class="spacer"></div>
</div>
the css:
.parallax {
/* The image used */
background: url('bgintro.jpg');
/*sizing height */
height: 799px;
width: 100%;
/* Creating the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
float: left;
display: inline-block;
z-index: -1;
}
#media only screen and (max-device-width:1024px) {
.parallax{
background-attachment: scroll;
}
}
and the fiddle:
https://jsfiddle.net/ovyhttgw/
Thanks in advance.