I'm trying to make the image on my site to display 100% height but crop width as needed. On PC the site works as intented as can be seen below:
However when I check the site with my phone it displays the whole image distorting it.
HTML:
<header class="wide">
</header>
CSS:
body, html {
height: 100%;
}
.wide {
width: 100%;
height: 100%;
background-image: url('sebastian-unrau-42537-unsplash.jpg');
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
#media (max-width: 1199.98px) {
.wide {
background-attachment: scroll;
background-position: initial;
}
}
The media query is mandatory as the image doesn't work at all if the background-image is fixed and centered.
Now if I remove "background-size: cover":
It's kind of closer what I'm after but not quite. Am i missing something?
My PC is running Chrome 66.0.3359.117 and my phone 65.0.3325.109
Ok I figured it out by accident. I was using an image from Unsplash.com and the the original resolution is 6000x4000. As I was making a Codepen project to post here I resized the image and wondered why it worked on codepen but not on my pc. Well it seems the resolution needs to be about 5500x3667 or smaller to work.
Maybe there is a limitation I did not know of but anyway got it working now. I didn't change anything else.
You could use this property :
background-size: x% y%;
The first value is the horizontal position and the second value is the vertical.
So you can try :
background-size: auto 100%;
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
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.
I tried solving the problem myself, but I can't do it.
Go to my site here:
http://digesale.com/
And scroll down to the footer. Just above the footer you will see an image. It's the one that says "Get Things Done, Start Buying," etc. That's the image I have a problem with...
On my browser/resolution it looks perfectly aligned, but a friend told me that on his resolution it doesn't cover the entire space left-to-right. If you press "Ctrl+-" on your keyboard you'll see the problem.
This is the code I use to put that image there:
<img style="margin-bottom: -20px;" src="http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png" alt="Digesale - How it works!" height="300" width="1350">
Can anyone help me make that image cover the whole width of that section so that it looks good even on smaller screen resolutions?
Thank you.
If you need to cover you can use the image as a background:
<div class="background"></div>
and in the css
.background {
background: url(http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png) top left no-repeat;
background-size: cover;
width: 100%;
height: 100%;
}
The important part is background-size: cover because it fill the entire div in all cases.
EDIT
If you want another behaviour, you can use your old img tag
<img src="http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png" alt="Digesale - How it works!" class="responsive-img">
And the css
.responsive-img {
margin-bottom: -20px; /* this was writting in inline style. */
width: 100%;
height: auto;
}
Try the below CSS
.background {
background: url(http://digesale.com/wp-content/uploads/2015/05/digesale-buy-how-it-works.png) top left no-repeat;
background-size: contain;
width: 100%;
height: 26vw;
}
I have a background image of a paper airplane on the body tag of this page: http://cogo.goodfolk.co.nz. The very tip of it is being cut off - if you resize the browser window the full image pops back in.
It's only happening in Chrome, and isn't consistent, if you refresh sometimes, or even hover over sometimes it's fine. If I remove all the background styles (background position and no-repeat) then the whole image is there - but of course isn't positioned correctly. It's also happening on other pages of my website (eg http://cogo.goodfolk.co.nz/online-surveying).
After days of debugging/searching I can't find anything that refers to this issue and/or fixes it - is it possibly a Chrome bug with background-position?
Any ideas or workarounds? Thank you!
//EDITED//
The relevant code is pasted below, although obviously this is pretty standard so it must be something else in the site that's causing the problem:
.home {
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
background-position: 10% 98%;
}
The background image is set to center, so this is expected behaviour, depending on window size. You could change this CSS declaration from:
.home {
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
}
To:
.home {
background: url("../img/airplane.jpg") no-repeat center top;
background-size: 70%;
}
This would anchor the image to the top of the screen, meaning it would not clip, but this may not be the behaviour you are looking for.
To complicate matters, you also have this, which is probably contributing to the problem. I would suggest removing it entirely:
#media (min-width: 1200px)
.home {
background-position: 20% -10%;
}
Yay thanks to everyone who left suggestions, fortunately I've figured out a workaround! I managed to pretty much keep the background styles the same, and just placed everything in a :before pseudo element on the body tag. You can check out the updated code at cogo.goodfolk.co.nz if you're interested, or it's pasted here:
.home {
position: relative;
min-height: 860px;
}
.home:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url("../img/airplane.jpg") no-repeat center;
background-size: 70%;
background-position: 50% 15%;
}
Set the display to "inline-table".