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.
Related
I have a status menu as a header on certain pages on my site which works fine on narrower viewports but on larger ones the background image is stretched too wide and becomes too narrow so the status menu dissapears into the white body.
How can I stop the background image from going too narrow when the viewports are made wider?
Trying a min-height in css didn't seem to solve the issue for some reason.
with the html:
<header class="banner-header bg-light">
</header
and the css
.banner-header {
width: 100%;
background: url("../images/navbar-header.svg") no-repeat center bottom;
background-size: cover;
min-height: 180px; }
Working fine on smaller viewports
Goes to narrow on larger viewports
background image without status menu
Try to control background-size manually on larger screens with #media
More info on #media here
More info on background-size here
For example:
.banner-header {
width: 100%;
background: url("../images/navbar-header.svg") no-repeat center bottom;
background-size: cover;
min-height: 180px;
}
#media (min-width:1200px) {
.banner-header {
background-size: 1600px 300px;
}
}
1600px is the width and 300px is the height. Those are placeholder values, pick what best suits your needs.
I hope this will help you!
I have only one image which is https://dummyimage.com/fullbanner. Below are the requirement.
https://jsfiddle.net/moorthy/ygn0Ldbw/1/
1) I would like to repeat the background image in footer for 100% width.
2) I would like to display the image without cut/crop for different devices based on browser width and device width.
I have tried with below code and different media queries with different pixels to achieve this but i could not get desired result. For some pixels and during resize of browser, some part of images getting cropped.
I tried with media queries 320,480,600,768,900,1024,1200 .. px but background image is not covered properly for all px.
Is it possible to display same image properly in different devices? I tried with background-size with different values like cover and contain but it didnt work properly.
for.e.g
<div id="container">
<div id="myPattern"></div>
</div>
#container{
width:100%;
height:71px;
background-color:black;
left: 0;
bottom: 0;
position : fixed;
}
#myPattern
{
height: 100%;
background-image: url("https://dummyimage.com/fullbanner");
background-repeat: repeat-x;
background-size: auto;
background-position: left;
}
You should use background-size: contain; instead of auto
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 website on Wordpress with the following code for one of the sections but it the image is not fitting on mobile phones please advice
.one_half_bg {
width: 50%;
float: left;
background-position: 50% 50% !important;
background-size: cover !important;
box-sizing: border-box;
padding: 20px;
}
Depending on the background and container aspect ratios, using cover might make the image get cut off because you're forcing it to cover the entire area of the container. If you want the image to be fully visible, but not necessarily cover the container, use background-size: contain;.
Also, use media queries to make it behave differently on different screen sizes, if that's what you want. Hard to know unless you post most context.
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%;")