Is it possible to make a responsive div with a background-image that maintains the ratio of the background-image like with an img?
Here is a nice and simple tip with only css/html:
Ingredients
Transparent PNG image with the desired ratio
(transparent-ratio-conserver.png)tag
Different images for different view-ports (retina.jpg, desktop.jpg,
tablet.jpg...)
The idea is to open an tag and to assign to it a transparent image (with our desired ratio). We also add class="responsive-image" that's all in HTML.
<img src="img/transparent-ratio-conserver.png" class="responsive-image">
In the CSS, we set background-size to fit the and we choose the width of our image.
.responsive-image{
width: 100%;
background-size: 100% 100%;
}
and finally, we serve for every view-port the right image:
/* Retina display */
@media screen and (min-width: 1024px){
.responsive-image{
background-image: url('../img/retina.jpg');
}
}
/* Desktop */
@media screen and (min-width: 980px) and (max-width: 1024px){
.responsive-image{
background-image: url('../img/desktop.jpg');
}
}
/* Tablet */
@media screen and (min-width: 760px) and (max-width: 980px){
.responsive-image{
background-image: url('../img/tablet.jpg');
}
}
/* Mobile HD */
@media screen and (min-width: 350px) and (max-width: 760px){
.responsive-image{
background-image: url('../img/mobile-hd.jpg');
}
}
/* Mobile LD */
@media screen and (max-width: 350px){
.responsive-image{
background-image: url('../img/mobile-ld.jpg');
}
}
You can download the demo from here.
How to keep aspect ratio of a background-image?
Use background-size: cover; to cover the entire element, while maintaining the aspect ratio:
.background-1,.background-2,.background-3 { /* Set the background image, size, and position. */ background-image: url('//via.placeholder.com/350x150'); background-size: cover; background-position: center;
/* Or, use the background shortcut. */ background: url('//via.placeholder.com/350x150') center/cover;
margin: 20px; border: 1px solid rgba(0, 0, 0, 0.3);}
.background-1 { width: 300px; height: 200px;}
.background-2 { width: 200px; height: 50px;}
.background-3 { width: 100px; height: 200px;}<div class="background-1"></div><div class="background-2"></div><div class="background-3"></div>How can I make my background image 'img-responsive'?
Use background-size: cover
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
cover - A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
Alternatively you might try contain depending on your desired behavior, but from the looks of your portfolio, cover is what you want
contain: A keyword that scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). Image is letterboxed within the container. When the image and container have different dimensions, the empty areas (either top/bottom of left/right) are filled with the background-color.
* edit - also added background-position: center center; background-repeat: no-repeat; in the shorthand background property for .hero since from the looks of your portfolio, you want those.
<!DOCTYPE html><html>
<head> <html lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Liam Docherty Digital Portfolio</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css">
<style> body { margin: 0; padding: 0; } .navbar.navbar-default { background-color: #4D5061; height: 10vh; z-index: 100; } .navbar.navbar-default ul { list-style-type: none; text-align: right; } .navbar.navbar-default ul li { display: inline-block; } .dropdown-menu li { text-align: center } .dropdown .dropdown-menu { background-color: #4D5061; } .dropdown .dropdown-menu a { color: white; } .navbar.navbar-default ul li a { display: inline-block; padding: 3.5vh 8px 4px; color: white; text-decoration: none; font-size: 14pt; font-family: 'Roboto', sans-serif; } .navbar.navbar-default ul li:after { content: ''; position: absolute; right: 50%; bottom: 0; left: 50%; height: 3px; background-color: #FFFFFF; border-radius: 9px; transition: all .2s; } .navbar.navbar-default ul li a:hover { color: white; } .nav.navbar-nav, .nav.navbar-nav>li { float: none; } .navbar.navbar-default ul li:hover:after { right: 0; left: 0; } .nav-title { font-size: 14pt; margin: 0; top: 35px; left: 50px; width: 100%; position: absolute; text-align: center; color: white; font-family: 'Roboto', sans-serif; } .navbar.navbar-default ul.dropdown-menu li, .navbar.navbar-default ul.dropdown-menu li a { position: relative; display: block; } #logo { padding-top: 2vh; padding-left: 20px; float: left; } .hero { background: url("https://static.pexels.com/photos/48727/pexels-photo-48727.jpeg") center center no-repeat;; background-attachment: fixed; position: relative; background-size: cover; text-align: center; width: 100%; max-width: 100%; width: 100vw; height: 100%; } section { position: relative; height: 95vh; } .section1 { height: 100vh; text-align: center; color: white; } .section2 { background-color: #11B5E4; text-align: center; color: white; } .section3 { background-color: #FFFFFF; text-align: center; color: white; } .fa-angle-down { color: #4D5061; position: absolute; bottom: 0px; } .fa-angle-up { color: #4D5061; position: absolute; bottom: 0px; } .footer { height: 6vh; background-color: #4D5061; padding: 0; right: 0; bottom: 0; left: 0; } .footertext { font-size: 14pt; color: white; font-family: 'Roboto', sans-serif; text-align: center; } .profile.box { bottom: 0; height: 50%; left: 0; margin: auto; position: absolute; right: 0; top: 0; width: 50%; } .shape { border-radius: 25px; background: #4D5061; content: url(http://i1126.photobucket.com/albums/l611/ldocherty1/IMG_0730_zpsiz4dqc47.jpg); color: white; height: 250px; margin: auto; padding: 3px; width: 250px; } .shape2 { background: linear-gradient(35deg, #4D5061, #4D5061); border-radius: 85px; color: white; height: 40px; margin: 1% auto; opacity: 0.9; padding: 0px; width: 250px; } </style>
</head>
<body> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img src="http://placehold.it/60x60" alt="Your Brand Name"></a> <h1 class="nav-title">Liam Docherty's Digital Portfolio</h1> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="#">Home</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#section3">Contact</a> </li> <li><a href="#">Something else here</a> </li> <li><a href="#">Separated link</a> </li> <li><a href="#">One more separated link</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a> </li> <li><a href="#">Another action</a> </li> <li><a href="#">Something else here</a> </li>
<li><a href="#">Separated link</a> </li>
<li><a href="#">One more separated link</a> </li> </ul> </li> <li><a href="#">Clients</a> </li> <li><a href="#contact-me">Contact Me</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav>
<section id="section1" class="section1"> <div class="hero"> <div class="profile box"> <div class="shape"></div> <div class="shape2"> <p>kjjjjjjjjjkjjjkkjkj</p> </div> </div> </div>
<a href="#section2"><i class="fa fa-angle-down" style="font-size:100px;"></i></a>
</section></html>CSS force image resize and keep aspect ratio
img { display: block; max-width:230px; max-height:95px; width: auto; height: auto;}<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p><img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">Make background image cover div by stretching, not maintaining aspect ratio
Turns out there was also a problem in the actual svg.
The solution below:
div {
position: relative;
&:after {
content: '';
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0.5;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% 100%;
}
}
I removed the height and width parameters from my svg and also added: preserveAspectRatio="none"
Aspect ratio divs with CSS background images
You could use % to set a padding taking width for reference to keep ratio.
example :
http://codepen.io/anon/pen/vNXgJp or http://codepen.io/anon/pen/VvKPMM (demos below)
.hotels { display: inline-block; width: 31.8%; vertical-align: top; margin-bottom: 22px; background: url(http://www.telodesign.com/test/cavallo-300.jpg) no-repeat red; background-size: 100% auto;}.hotels:before { content: ''; padding-top: 85%; float: left;}<div class="hotels"> Here's a title</div>
<div class="hotels"> Here's a title</div>
<div class="hotels"> Here's a title</div>Is there any ratio for Responsive Full Background Image
This should do the trick ;)
body {
background-image:url('../images/bg-img.jpg');
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
background-size: 100% auto;
}
background-size: WIDTH HEIGHT;
EDIT: you could do something like this:
body{
background-image:url('https://i.stack.imgur.com/vLd20.jpg');
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
}
@media(min-width: 768px){
body {
background-size: 100% auto;
}
}
@media(max-width: 767px){
body {
background-size: 100% 100%;
}
}
Codepen: http://codepen.io/anon/pen/BpJWOR
Note that "100% 100%" will stretch the background disproportionately. you can use "auto 100%" instead at the "max-width 767px section"
You could also experiment with 110% or higher. just keep trying until it gets the perfect look... welcome to responsive webdesign :P
Related Topics
Center Div on The Middle of Screen
How to Add a Top and Bottom Shadow While Scrolling But Only When Needed
A Mnemonic for The Order of CSS Margin and Padding Shorthand Properties
What Are Your Tips for Best Practice for Web Application Structure
Scrolling Effect: Slow at First Than It Goes Fast
Hide Parts of Site on Mobile Devces
How to Color The Fontawesome Icon Colors
Helvetica Neue Light with @Font-Face .. Legal
CSS: Is It Correct That Text Content of a Div Overflows into The Padding
How to Prevent Image Flash When Transitioning with Blur
Flash of Unstyled Content (Fouc) in Firefox Only? Is Ff Slow Renderer
React Router Dom V6 - Hover Styles on Active Nav
How to Show/Set Row Names to Matrixinput (Shinyincubator)