How to Show Full Height Background Image

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



Leave a reply



Submit