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.
Related
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'm reading news on this page mostly on my mobile device:
link
The big banner right of the logo is not scaling properly on the mobile device.
So when you resize the window and make it smaller everything is resizing except the banner.
Im learning php, css and just wondering how this could be solved. Ive checked also on stackoverflow and find something like:
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */ }
I've tried this also in the dev. mode of google chrome but it desnt work.
Is this solvable with the provided data from the dev mode?
Code looks like:
<div style="position:relative;
width:728px; height:90px; z-index:10;
background-image: url(http://www.image.jpg);">
Based on your code, the banner is implemented as background image, not an IMG element. To make background image scaled so that it's entirely visible, use background-size: contain. So your user styles could be like this:
.site-header-banner > DIV {
background-size: contain;
background-repeat: no-repeat; // To disable repeating background image.
max-width: 100%;
}
You can use it as a background with the following properties:
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
https://jsfiddle.net/alexndreazevedo/xe9tvkyr/
You can define a fixed size to DIV containing image background and change it by media query.
Fitting a image into a div and maintaining the aspect ratio isn't that hard. But trying to keep the selected area in the center of an image is the hardest part.
What happens is that the image will zoom out to the top-left, while I want it to stay in the center, because people often take pictures where the biggest attraction is in the center of a photo.
This is the code I use now:
.cover-photo {
width: auto;
height: 60vh;
background-color: lightgray;
position: relative;
margin: 60px 0 0 0; //There is a header above this div
overflow: hidden;
background: url('../Img/cover_photo.jpg') no-repeat center center;
background-size: cover;}
It's supposed to be like a cover photo of a facebook profile. If you have any suggestions or solutions, I would like to hear them.
You can use different kind of approch instead of worrying about which area should I zoom? use jquery image cropper(there are many this kind of plugins )
demo
https://github.com/scottcheng/cropit/
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.
I want to stretch the background image to match the size of the screen
body {
margin-left: auto !important;
margin-right: auto !important;
width: 80%;
background-image: url(hola.jpg);
}
I try to put background-size: 1500px 1500px; and is fixed.
How I can do it and automatic for all pages resolutions?
background-size:cover;
background-position:50% 50%;
Not compatible with IE8 and lower, yours to decide whether you need to support those now that IE11 is already out.
Use this, it should even work if your <body> does not cover the whole window:
background-attachment: fixed;
background-size: 100%;
(Source: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size:
<percentage>
A value that scales the background image in the corresponding dimension to the specified percentage of the background positioning area, which is determined by the value of background-origin. [...] If the background's attachment is fixed, the background positioning area is instead the entire area of the browser window, not including the area covered by scrollbars if they are present. [...]