I am moving from a desktop background at 100% and changing to a mobile background once I hit a tablet/mobile size. My problem is as I go down in size, the content starts to exceed the background length.
#bg {
background-image: url('images/bg.gif');
background-size: 100% ;
background-repeat: no-repeat;
position: relative;
height: 100%;
}
Then going to 992px. This image is 992px width and 1425px height
#bg {
background-image: url('images/mobile/mobile-bg.jpg');
background-size: 100% auto;
}
HTML structure
<div class="row main-content" >
<div class="col-xs-12" id="bg">
<div class="row">
<div class="col-xs-12 ">
<div class="row">
<!-- content here -->
</div>
</div>
</div>
</div>
</div> <!-- row main-content end -->
I don't get why it is able to scale and keep the content until it gets smaller (e.g. the mobile size)
What am I missing? I don't want to stretch the image. I want to maintain the right ratio. Do I just need an bg image with even larger height?
I believe you're looking for background-size of either cover or contain. MDN has more on that here: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
Cover will make the background image as small as possible while maintaining the aspect ratio and contain will make sure the background image is as large as possible while maintaining ratio.
If you need to support IE below version 9, you'll need some sort of a polyfill.
#bg {
background-image: url('images/bg.gif');
background-size: contain;
background-repeat: no-repeat;
position: relative;
height: 100%;
}
I dont quiet exactly get what your your tryin to achieve you may want to look at this
http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/
Chances are this is what you want, as it will scale and crop the picture according to device size.
.bg{
background:url(imgurl/picture.jpg) no-repeat center center;
background-size: cover;
}
This personally what I'd use. Most likely using 3 different appropriate sized images in media queries for phone, large tablet, large desktop. Not because the image wouldn't scale, but to save bandwidth for smaller devices.
Related
What I am trying to achieve is having multiple images stacked vertically on a website, so that an image will fill the entire screen.
What I hope for
1920x1080
1000x1080
The magenta is the active screen region. However, I just can't seem to only scale the height of the image. Only the width is scaling. The solutions I have found, break the aspect ratio and crushes the quality of the images used. I would rather scale the image a bit, than break the aspect ratio, therefore the weird scaling in 1000x1080
HTML
<div id="home">
<div>
<h1 id="welcomeHeaderOverlay">HermansenDesigns</h1>
<hr>
<h3 id="welcomeSubHeaderOverlay">Where code happens</h3>
</div>
<img class="img-scale" src="https://picsum.photos/1920/1080/?random" alt="placeholder+image" >
</div>
I have a few of these stacked
CSS
.img-scale {
background-size: cover !important;
height:100%;
}
Result
The image scales with the proper aspect ratio, however, it makes it full-sized 1920x1080, instead of 100% of the active screen region. And makes it so there is a horizontal scrolling.
The outcome is something like this
1905x1080
500x1080
I have tried various methods, from bootstrap with img-fluid and containers to various tutorials on full-sized background images. I have achieved a solution that works for a 1920x1080* browser, however, it scales horribly.
Sorry for the newbie question.
Is it even possible in pure css, or do i need some js or jquery?
Maybe you are looking for something like this:
body {
margin:0;
}
div {
height:100vh;
background-size:cover;
background-position:center center;
}
<div style="background-image:url('https://picsum.photos/1920/1080/?random')"></div>
<div style="background-image:url('https://picsum.photos/1920/1081/?random')"></div>
<div style="background-image:url('https://picsum.photos/1920/1082/?random')"></div>
this is only achieved through css, so instead of having and tag you can just have a div tag without the src attribute.
and then in the CSS
HTML
<div class="scale-img"></div>
CSS
.scale-img {
/* Set height to some high amount so you can see your image doing as you want*/
height: 5000px;
background-image: url("path/to/your/image1920x1080");
/* background-size: 1920px 1080px; */
/*
EDIT: A better approach would be to use contain for responsiveness
*/
background-size: contain;
background-repeat: repeat;
}
#home
height: 100%
width: 100%
background-image: url("/lib/img/home.jpg")
background-position: center center
background-repeat: no-repeat
background-attachment: fixed
background-size: cover
Just so you know, I am using SASS for my CSS.
The problem is I want my home landing page to be full screen size and responsive, I have a landscape image which works fine at full screen but at mobile size the height of it does not fit the whole screen. Is there a better solution for this?
img_background {
max-width: 2000px; // maximum width for the backgound pic
min-width: 100px; // for mobile phones in portrait view
position: absolute;
}
This code will be responsive, so when you resize your browser window on PC, it will resize the image to the width of your browser. On mobile devices, the entire image will appear.
I hope this helped!
(EDIT: this is CSS)
You can use bootstrap for doing your elements responsive. This way, the element size will change with the resolution screen:
Use .container for a responsive fixed width container.
<div class = "container">
...
</div>
Or:
<div class = "container-fluid">
...
</div>
Or:
<div class = "container">
...
</div>
Or:
<img class="img-responsive" src="your_image.jpg">
There are more solutions using bootstrap but the basic ones are these.
Check this link for more information:
Bootstrap
#home{
height: 100vh;
width: 100%;
float: left;
background-image: url("/lib/img/home.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
/*Note background attachment fixed not work in mobiles accurately like ios and also on ipads...
USe background attachment scroll for the same...*/
background-size: cover;
}
I have a width:100% image as the header of my website, like here:http://directdatanou.comli.com/
How can I make the image scale depending on screen resolution?
I tried using the image as background of a div, like below:
<div id="header" class="latime_100p">
</div>
with css:
#header{
background: #5b6773 url("../grafica/header.jpg") no-repeat top center;
background-size: cover;
height:500px;
}
But it doesn't scale right on big resolutions (it shows only parts of the image as the screen width and height grow).
So I ended up with using the image directly?
How can I make it scale gracefully depending on resolution?
Thank you.
If you need that ALL image is showing:
<img src="...." class="img">
.img {
width: 100%;
height: auto;
}
That's all
this is a weird one because there are a lot of aspects out of my control. I'm working with a custom image carousel where the image is a background image and the containing div has a set width and height (these can't be changed) but things like background-position and background-size I can manipulate.
The problem comes from images of varying aspect ratios. If I just try manipulating the width and height, the image gets cropped. Trying something like:
background-size: 100%
will work with images that are wider, while:
background-size: auto 100%
works better for taller images.
background-size: cover
crops both sizes and in a perfect world I'd like to find a CSS only solution. Does anyone have any ideas on how to make images of both aspect ratios completely fit into the same sized div?
You're looking for the contain value:
contain
This keyword specifies that the background image should be
scaled to be as large as possible while ensuring both its dimensions
are less than or equal to the corresponding dimensions of the
background positioning area.
body > div {
height: 500px;
width: 500px;
}
.tall {
background: #F00 url(http://www.placehold.it/500X1000) center no-repeat;
background-size: contain;
}
.wide {
background: #F90 url(http://www.placehold.it/1000X500) center no-repeat;
background-size: contain;
}
<h2>I contain a tall image!</h2>
<div class="tall"></div>
<h2>I contain a wide image!</h2>
<div class="wide"></div>
I'm trying to figure out how to make a background-image in a div full width and responsive. The background-image is expanding across the width of the page (and is responsive), but the height of the image isn't its full height. It seems like it's being cut-off somehow. I'm using bootstrap framework, and the reason I'm trying to do this is I want to overlay some text on the image. I've tried so many different things but cant seem to figure it out, help!
<div class="bg-image">
<div class="container">
<div class="row-fluid">
<div class="span12">
<h1>This is some text</h1>
</div>
</div>
</div>
</div>
.bg-image {
background: url(img/image.jpg) no-repeat center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
max-height: 450px;
}
Here is one way of getting the design that you want.
Start with the following HTML:
<div class="container">
<div class="row-fluid">
<div class="span12">
<div class="nav">nav area</div>
<div class="bg-image">
<img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
<h1>This is centered text.</h1>
</div>
<div class="main">main area</div>
</div>
</div>
</div>
Note that the background image is now part of the regular flow of the document.
Apply the following CSS:
.bg-image {
position: relative;
}
.bg-image img {
display: block;
width: 100%;
max-width: 1200px; /* corresponds to max height of 450px */
margin: 0 auto;
}
.bg-image h1 {
position: absolute;
text-align: center;
bottom: 0;
left: 0;
right: 0;
color: white;
}
.nav, .main {
background-color: #f6f6f6;
text-align: center;
}
How This Works
The image is set an regular flow content with a width of 100%, so it will adjust itself responsively to the width of the parent container. However, you want the height to be no more than 450px, which corresponds to the image width of 1200px, so set the maximum width of the image to 1200px. You can keep the image centered by using display: block and margin: 0 auto.
The text is painted over the image by using absolute positioning. In the simplest case, I stretch the h1 element to be the full width of the parent and use text-align: center
to center the text. Use the top or bottom offsets to place the text where it is needed.
If your banner images are going to vary in aspect ratio, you will need to adjust the maximum width value for .bg-image img dynamically using jQuery/Javascript, but otherwise, this approach has a lot to offer.
See demo at: http://jsfiddle.net/audetwebdesign/EGgaN/
When you use background-size: cover the background image will automatically be stretched to cover the entire container. Aspect ratio is maintained however, so you will always lose part of the image, unless the aspect ratio of the image and the element it is applied to are identical.
I see two ways you could solve this:
Do not maintain the aspect ratio of the image by setting
background-size: 100% 100% This will also make the image cover the
entire container, but the ratio will not be maintained. Disadvantage
is that this distorts your image, and therefore may look very weird,
depending on the image. With the image you are using in the fiddle, I
think you could get away with it though.
You could also calculate and set the height of the element with javascript, based
on its width, so it gets the same ratio as the image. This
calculation would have to be done on load and on resize. It should be
easy enough with a few lines of code (feel free to ask if you want an
example). Disadvantage of this method is that your width may become
very small (on mobile devices), and therfore the calculated height
also, which may cause the content of the container to overflow. This
could be solved by changing the size of the content as well or
something, but it adds some complexity to the solution/
I also tried this style for ionic hybrid app background. this is also having style for background blur effect.
.bg-image {
position: absolute;
background: url(../img/bglogin.jpg) no-repeat;
height: 100%;
width: 100%;
background-size: cover;
bottom: 0px;
margin: 0 auto;
background-position: 50%;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}