Not a a native english speaker so there's probably a better way to shape the question...anyway:
What I want to create is similar to the header here: http://thegreatdiscontent.com/adam-lisagor
The header image is shown fully in all screensizes, and the aspect-ratio of the image is of course always correct.
This is made using an and getting the text to appear on the using position: absolute.
But if you use css for the background-image instead of an , you'll get something like this header: http://elegantthemes.com/preview/Harmony/
Resize browser to see parts of the background being left out.
Is it possible to make a a div look and behave like the first link, using the background-image css property like on the second link?
Or do I have to change how my entire header works and use the for the background for it to show fully in all screensizes?
I would like to have a header background that doesn't leavy anything out, but is fixed like this http://getflywheel.com/
Only idea so far is to make a transparent png that has the correct ratio of the image, and then use background-image that has background-attachment:fixed. But this doesn't seem very smart.
Hopefully I was clear enough that I'll get understood. Thank you all very much in advance!
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.
This is done with the background-size property:
background-size: cover;
Cover will make the image as small as it can be, whilst still covering the entirety of its parent, and maintaining its aspect ratio.
You may also want to try contain, which makes the image as big as it can be whilst still fitting inside the parent.
Source(s)
MDN - background-size CSS property
I think theres a better solution than contain or cover (which dind't work for me, btw).
Here's an example I recently used for a logo:
#logo{
max-width: 600px;
min-height: 250px;
margin: 0 auto;
background: url(../images/logo.png) no-repeat center;
background-size: 100%;
}
So now we have a responsive div with a backgound image, which size is set to the full width of the div.
Although there are other solutions.
% will scale the div to image size or the aspect ratio.
.responsive-image{
width: 100%;
background-image: url(x.jpg);
background-repeat:no-repeat;
background-size: 100% 100%;
}
You just need to pass the height to width ratio to the element.
For an image 1400x600;
1400:600 = 98:42
span( style="padding-bottom:42%;
width:98%;
background:url('/images/img1.jpg');
background-size:contain;
display:inline-block;")
would display the same as
img(src="/images/img.jpg" style="width:98%;")
Related
It is all fine when i open it through my pc browser
I have changed the height to 350%, it works, covered all of the screen, but the image turns to be so stretched out. I have changed the background-size to contain, it doesnt work.
{background-image: url(bg.jpg) ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: 100% 100%
this it what it looks like
Image ends here
it even looks worse, when i switch to desktop mode
Image ends here
Try adding min-height to 100vh..Maybe it helps
Add this css code to your div
min-height : 100vh;
Your best option here would be to use a media query for mobile sizes and either another picture with an aspect ratio set for mobiles, or to have the background-positions and size changed to suit for phone. Code below to get you started.
/*--For Desktop--*/
body{
background-image: url(bg.jpg) ;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-size: 100% 100%
}
#media only screen and (max-width: 600px) {
body{
background-image: url(theotherimage-withnewaspectratio.jpg);
}
}
Also - max-width i'd change based on when your image starts to look dodgy on desktop rather than the 600px (just shrink your screen in developer mode to tell the pixel width)
Change background-size to cover instead of 100% 100% i think this will help you some how
Apologies if the title is hard to follow.
Essentially I want the background image to scale relative to the screen size, but only above a certain point, so if you shrink the screen small enough, the image will not shrink with it.
I've done it with my divs with this:
.row{
width: 100%;
min-height: 70px;
min-width: 1000px;
}
Is there something similar I can do with the background?
This is what I have at the moment.
.body{
background-image: url('../static/banner.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
Media queries can do this for you, just use a breakpoint where the background has stops to scale.
For example, this CSS will apply styles only if your browser's
viewport width is equal to or narrower than 12450px:
#media (max-width: 12450px) { ... }
Take a look at:
https://developer.mozilla.org/en/docs/Web/CSS/Media_Queries/Using_media_queries
I have a responsive background image here and it works well in most screen sizes, however, on the iPad/tablet size it clips the edge of the windmill blades.
Here is the CSS I am using for the space:
background: url('/image/background-img.jpg') no-repeat;
width: 100%;
background-position: 0% 25%;
background-size: cover;
background-position:center;
background-repeat: no-repeat;
How can I continue to fill the background but not clip the image?
It's the expected behavior of background-size:cover. It displays the image as small as possible, making sure it covers all the element and cutting off (cropping) the excess.
You'll want to adjust the min-height of your element until you are happy with the result. To keep it from being cut (too much). To keep it from interfering with how it looks on different screens, you might want to wrap your special rules for tablets in a specific #media query. Example:
#media (max-width: 991px) and (orientation: landscape) {
.jumbotron {
min-height: 62vw;
}
}
I'm currently working on a project where we use a slider with images. This slider is displayed with width 100%, and currently we're adjusting the height to make the slider responsive, in case the user resizes the browser window or visits the website using their phone.
However, the website is for an artist who obviously does not want the image to be altered in any way, especially not altering with the aspect ratio. So what we're looking into is having height: auto to adjust the image height correctly according to the width: 100%, without altering the image (aspect ratio) itself.
This does not work like intended however, using the following code:
#media (min-width:1600px) {
#header{
height:auto;
width: 100%;
min-height: 630px;
background-size: 100% auto;
}
#slidershadow {
height: 630px;
}
}
We need to have some min-height, otherwise we cannot display the slider controls correctly. Here is a picture of our current situation (first image) and the expected behaviour (second picture).
Is there a way to resize our slider responsive, but keeping the following in mind:
The aspect ratio of the image cannot be altered;
We cannot crop images too much (only slightly);
There is a minimum height to keep in mind;
If it helps, all images in the slider have the same size.
You have to give a max-width:100% to your img.
Plus background-size only works when you are working with background-images.
Since you are applying max-width to your img there is no need to apply max-width to its parent #header
Last, but not least try not use min-height and height:auto at same time in the same selector.
Below is a working snippet according to the above comments:
img {
max-width: 100%;
height: auto
}
#media (min-width: 1280px) {
#header {
min-height: 500px;
}
}
#media (min-width: 1600px) {
#header {
min-height: 630px;
}
}
<div id="header">
<img src="http://placehold.it/1920x630" />
</div>
I have a responsive background image with the following properties
background: url( '#{sitePath}/main_banner.png') center no-repeat;
max-width: 100%;
z-index: -10;
height: 475px;
background-size: contain;
The image needs to be able to scale down (as it does currently) but without a massive height (475px) for smaller devices. 100% min & standard height do not work and I want to avoid specifying individual heights for different media queries if I can help it.
Does anyone know how I can make this effectively responsive?
Thanks
You have put static height: 475px; If you want to have smaller height on smaller device try using media queries:
#media (max-width: size-that-you-want){
.class-name{
width: some-number;
}
}
This should work.