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
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 an image that I'm trying to use for my initial parallax styled background that won't change orientation. It's the proper aspect ratio for a portrait, but no way I edit the code or the image itself it won't stop turning.
I've tried using translate code in my css, and I've tried the whole z-index and webkit lines and I eventually learned that those wouldn't work anyways. I don't know what else to try.
.parallax1 {
/* The image used */
background-image: url("me.jpg");
/* Set a specific height */
height: 600px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
The expected outcome is supposed to be landscape oriented version of a portrait of me. The aspect ratio is correct for this type of image but the photo still stretches and turns portrait.
You might want to create a JSFiddle to demonstrate this, but it's most likely your background-size: cover; value for background property ensures that the image will fill your whole container while preserving the aspect ratio. Because you only defined a height on your container your width is naturally "100%" (because divs are block elements). If your viewport or the container's parent ends up more wide than narrow so will your background image:
https://jsfiddle.net/w4x3bq61/
One way you can tackle this is to set the width of .parallax1 as well so it always have a taller height vs width such as:
.parallax1 {
/* The image used */
background-image: url("");
/* Set a specific height */
height: 600px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 300px;
}
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%;
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.
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%;")