How to show full height background image?
You can do it with the code you have, you just need to ensure that html
and body
are set to 100% height.
Demo: http://jsfiddle.net/kevinPHPkevin/a7eGN/
html, body {
height:100%;
}
body {
background-color: white;
background-image: url('http://www.canvaz.com/portrait/charcoal-1.jpg');
background-size: auto 100%;
background-repeat: no-repeat;
background-position: left top;
}
Full Height Background Image using CSS on Mobile devices
Removing height:100%
and keeping background-size: cover;
will solve the current issue.
css - Display background full height and cover content inside
Not sure this is what you are looking for but try this:
Added a background-position: center bottom;
on the svg container and some padding-bottom
(change this to fit your needs).
.main {
background-image: url("https://svgshare.com/i/68x.svg");
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
padding-bottom: 10vh;
}
.header .logo {
margin: 0 auto;
padding-top: 5%;
padding-bottom: 5%;
}
.header .logo img{
width: 8em;
}
.banner {
text-align: center;
}
.banner .content {
}
.banner img {
max-width: 300px;
width: 100%;
}
.banner .content p {
font-size: 0.8em;
color: white;
font-family: 'PingPang';
}
.banner .content .title {
font-size: 2em;
color: white;
}
.footer {
margin-top: 1em;
padding-top: 0;
padding-bottom: 2em;
text-align: center;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="main">
<div class="container">
<div class="row header">
<div class="logo">
<img src="https://svgshare.com/i/69T.svg" alt="logo">
</div>
</div>
<div class="row banner">
<div class="col-md-4 content">
<div class="title">
ABOUT US
</div>
<div class="text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.。
</div>
</div>
<div class="col-md-8 img-screen">
<img src="http://knstekcom.r.worldssl.net/wp-content/uploads/2015/09/work-culture.png" alt="Sample Image">
</div>
</div>
</div>
</div>
<div class="container">
<div class="row footer">
Follow me
Something here: ....
</div>
</div>
</div>
</body>
</html>
100% width background image with an 'auto' height
Instead of using background-image
you can use img
directly and to get the image to spread all the width of the viewport try using max-width:100%;
.
Please remember; don't apply any padding or margin to your main container div as they will increase the total width of the container. Using this rule, you can have a image width equal to the width of the browser and the height will also change according to the aspect ratio.
Edit: Changing the image on different size of the window
$(window).resize(function(){
var windowWidth = $(window).width();
var imgSrc = $('#image');
if(windowWidth <= 400){
imgSrc.attr('src','http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a');
}
else if(windowWidth > 400){
imgSrc.attr('src','http://i.stack.imgur.com/oURrw.png');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-container">
<img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a" alt="Sample Image"/>
</div>
How to scale a background image to fit the full width of the screen while maintaining aspect ratio? Height is cut off when I use cover
add following code in css
(note: set height of selector to manual like this):
selector {
background-size: cover;
background-repeat:no-repeat;
background-position:center;
height: 50vh /*manual add*/;
width:100vw;
}
Related Topics
Dividing Long List of <Li> Tags into Columns
Column-Count Is Not Working in Chrome
Hover and Click on CSS Triangle
Text with Image Background in Svg or CSS
How to Change CSS Class for the Inputfield and Label When Validation Fails
Prevent a Pseudo Element from Triggering Hover
Differencebetween P:Nth-Child(2) and P:Nth-Of-Type(2)
How to Unskew Background Image in Skewed Layer (Css)
Adding a Small Picture on the Right Side of Textfield with CSS
@Font-Face Won't Load via Https in Ie
CSS Multiple Selectors Without Comma
How to Style a Div to Be Trapezoidal
@Import Styles Not Working in a Media Query
Using a Percentage Margin in CSS But Want a Minimum Margin in Pixels