When I set background-image to one of the div and set the background-size as contain, there will be gap between two divs.
the code is below:
<head>
<style>
.header {
height: 50px;
background: url('https://xxx.png') no-repeat;
background-size: contain;
}
.footer {
height: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
</div>
<div class="footer">
</div>
</div>
</body>
How to remove the gap?
Related
I have some CSS right here, and the banner I put isn't showing up. Any help?
css:
.home {
display: flex;
background: url('./images/banner.jpg') no-repeat center;
height: 100vh;
}
html:
<section class="home" id="home">
<div class="max-width">
<div class="home-content">
<div class="text-1">Hello, my name is</div>
<div class="text-2">Sefatul Bahar</div>
<div class="text-3">And I'm an <span>accountant</span></div>
</div>
</div>
</section>
This might make more sense with the HTML too. You didn't provide your HTML so I'm not exactly sure what you're going for but this is as good as i can get with just a little bit of CSS.
/*I used a different image just to see if this would work*/
.home {
display: flex;
background: url(https://wallpaperaccess.com/full/187161.jpg);
/*you were missing the -repeat and -position*/
background-repeat: no-repeat;
background-position: center;
height: 100vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Help</title>
</head>
<body>
<main class="home">
<div>
<h1> Hello </h1>
</div>
</main>
</body>
</html>
/*I used a different image just to see if this would work*/
.home {
display: flex;
background: url(https://wallpaperaccess.com/full/187161.jpg);
/*you were missing the -repeat and -position*/
background-repeat: no-repeat;
background-position: center;
height: 100vh;
}
All my searches tell me to make the img {max-height: 100%} but that doesn't seem to have any effect.
I don't understand if I've set the height of the parent container (earth-block), why setting the img height won't constrict the image to that size.enter image description here
.earth-block {
height: 200px;
}
.earth-block img{
max-height: 100%;
}
<div class="earth">
<div class="wrapper">
<div class="earth-block"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRZj1KyXPz468xvFWikAXA-dPkMu14q-XuB3dKKl9LF6Bl4SO-oTw&s" alt="earth"></div>
</div>
</div>
this ll help you out
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.earth-block {
height: 200px;
background-color: aliceblue;
display: flex;
}
.earth-block img{
flex-grow: 100;
object-fit: none;
object-position: center;
}
</style>
</head>
<body>
<div class="earth">
<div class="wrapper">
<div class="earth-block"><img src="https://cdn.pixabay.com/photo/2016/10/20/18/35/sunrise-1756274__340.jpg" alt="earth"></div>
</div>
</div>
</body>
</html>
I'm using wordpress with a custom template and I want to display a div the width of the window. This is my html code:
<section id="calltoaction" class="calltoaction " style="background-position: 50% 15px;">
<div class="blacklayer"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Title Text</h2>
<p>Test Text</p>
</div>
<div class="col-md-12 text-center">
Download
</div>
</div>
</div>
</section>
This is my css code:
.calltoaction {
background-position: unset !important;
position: absolute;
left: 0;
right: 0;
background-image: url(http://roguelevels.com/wp-content/uploads/2018/04/DSC6507-683x1024.jpg);
background-size: cover;
padding: 80px 0 90px 0;
}
The problem is, everything I create gets placed within this div class:
.row {
margin-right: -15px;
margin-left: -15px;
}
So i'm trying to write custom css to create a div that displays over the top of this class as I don't have access to the template's code directly.
At the moment the result is this. I want that image to fit the width of the page.
Any help would be greatly appreciated.
See attached code-snippet for how to stack divs ontop of each other, assuming one div has setting: position: absolute; . I moved the lowest div slightly so it is visible.
.div-1 {
position: absolute;
z-index: 1;
background-color: red;
height: 100px;
width: 100px;
margin: 10px 0px 0px 10px;
}
.div-2 {
position: relative;
z-index: 2;
background-color: green;
height: 100px;
width: 100px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="index.css">
<body>
<div class="div-1"></div>
<div class="div-2"></div>
</body>
</html>
I'm using Bootstrap and I want to place the last row of the .container at the bottom of the page's content.
The first thing I've tried was the following code:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.highlight {
border: 1px solid red;
}
.push-to-bottom {
position: absolute;
bottom: 30px;
width: 100%;
}
</style>
</head>
<body>
<div class="container highlight">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/500x500">
</div>
</div>
<div class="row push-to-bottom text-center highlight">
<div class="col-md-12">
<button>Press me</button>
</div>
</div>
</div>
</body>
</html>
However, it doesn't work as expected because of the position: absolute property -- the last row doesn't know anything about other elements in DOM, so it gets wrong width and positioning.
Well, I changed this code to the following:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.highlight {
border: 1px solid red;
}
.rel {
position: relative;
}
.push-to-bottom {
position: absolute;
bottom: 30px;
width: 100%;
}
</style>
</head>
<body>
<div class="container highlight rel">
<div class="row">
<div class="col-md-12">
<img src="http://placehold.it/500x500">
</div>
</div>
<div class="row push-to-bottom text-center highlight">
<div class="col-md-12">
<button>Press me</button>
</div>
</div>
</div>
</body>
</html>
As you see, I've added the position: relative property to the .container element, so now width: 100% do the right job, and our element placed in the .container visually. But it still has the following problems:
It doesn't care about other rows, so it can overlap with other rows' content
It still doesn't placed at the bottom of the page, not the .container only
How can I achieve such behavior without hardcoding heights and widths as suggested in other questions related to this problem?
You can use footer.
<footer id="footer" class="footer row">
<div class="container">
Your text or DOM here
</div>
</footer>
CSS:
footer {
display: block;
bottom: 0px;
height: [depends by content]
right: 0%;
left: 0%;
position: fixed !important;
position: absolute;
top: expression((0-(footer.offsetHeight)+ (document.documentElement.clientHeight? document.documentElement.clientHeight: document.body.clientHeight)+(ignoreMe=document.documentElement.scrollTop? document.documentElement.scrollTop:document. body.scrollTop))+'px');
text-align: center;
visibility: visible;
}
I have a fixed header and right aside of 260px. I have three columns with height 100%.The content area to be a fluid-container that is 12 column wide.
<div class="header"></div>
<div class="secondary-aside"></div>
<div class="container">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
</div>
Below is the fiddle i am working on. The width of the cols are breaking with the layout.
http://codepen.io/anon/pen/qxusJ
Not really clear what you mean by The width of the cols are breaking with the layout.
Try it this way :
html, body, .container {
height:100%;
width:100%; /*keep html and body 100% */
margin:0;
background:lightgray
}
.container {
display:table;
width:calc(100% - 260px);/*keep container 100% - 260px */
border-spacing:0.5em;
}
I don't quite understand; you want the container to be fluid, but then you have columns within it that have a fixed width?
How you could do it is:
<div class="header"></div>
<div class="container">
<div class="secondary-aside"></div>
<div class="content">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
</div>
With the following CSS:
html, body {
height: 100%;
}
.header {
height: 60px;
background: blue;
width: 100%;
}
.container {
overflow: auto;
height: 100%;
}
.secondary-aside {
width: 25%;
float: right;
background: red;
height: 100%;
}
.content {
width: 75%;
float: left;
background: #777;
overflow: auto;
height: 100%;
}
.col-sm-4 {
height: 100%;
background: yellow;
width: 33.3333%;
float: left;
}
Would that help?
I don't understand why you use so much of custom styles in BS.
Check the responsiveness of the page in http://www.responsinator.com/
Check this out.
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.secondary-aside {
width: 25%;
float: right;
background: #000000;
height: 100%;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="header">i am the header</div>
<div class="secondary-aside col-sm-4">ff</div>
<div class="col-sm-8">
<div class="col-sm-4" style="background-color: red">r</div>
<div class="col-sm-4"style="background-color: green">g</div>
<div class="col-sm-4"style="background-color: blue">b</div>
</div>
</div>
</body>
</html>