I've searched for hours upon hours and now I figure it's time for me to ask the question. I can't get my background image that is placed in my header to fit to screen. It works for every kind of computer resolution fine, but where I run into trouble is when I am viewing on a phone, it doesn't want to shrink. I've done min-height, max-height, I've tried everything, the problem partly I think is that the header div itself is smaller than this image, but I also don't really know and need some guidance, i'm relatively new to the CSS scene.
Here is what I have:
#header {
background-image: url('http://hamsoc.polymath.io/wp-content/uploads/2013/05/hamsocheader.png');
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 209px;
}
Website url is http://hamsoc.polymath.io
Thank you for your help in advance!
Duncan Beattie gave me the answer and it worked like a charm. Here is what he said:
"You have background-size: cover which is fitting the height of the
background image to the fixed height of your div, 209px. remove the
fixed height and replace with padding-bottom:15% this will kep the
aspect ratio of the div the same and scale the image as viewport gets
smaller."
You have background-size: cover which is fitting the height of the background image to the fixed height of your div, 209px.
remove the fixed height and replace with padding-bottom:15% this will kep the aspect ratio of the div the same and scale the image as viewport gets smaller.
I would suggest having the header image in your HTML rather than a background image and then setting a max-width like so:
#header img{
max-width: 100%;
height: auto;
}
This will also allow you to make the image "clickable" which is generally wanted in a header logo.
DEMO FIDDLE
FULLSCREEN
Have you used the a precentage to set the height of the image in the div?
So set the image height to be say 100% of the div?
If not then maybe you could use some javascript code to detect whether they are on a mobile device, and set the height of it accordingly?
The hard coded height value is messing you up. Try playing with the height: 290px value and watch the header fit properly on smaller screens.
Instead of a background image, you can try putting the image in the html and using a CSS property to help the content scale down on smaller screens.
img {
max-width: 100%;
}
Related
On my site, I want the body to scroll over my header image. With background-attachment: fixed, it works, but the image gets way too big after which my title is not readable anymore. In other words, the background-size: cover, doesn't work anymore when I add background-attachment: fixed.
Curious if anyone else has had this problem and if anyone has a solution for this.
Here is my code:
.site-header {
background: url("https://howtogetrippedathome.com/wp-content/uploads/2018/01/How-To-Get-Ripped-At-Home-Header-Image.png") top;
background-size: cover;
}
PS2, my site: https://howtogetrippedathome.com/
background-attachment: fixed will handle the image as if the element was 100% height and width of the viewport. Therefore background-size: cover; will resize the image height to fit the viewport.
Try using background-size: 100% auto; (100% of the width | auto will set the height in a way that won't stretch the image)
I tested it on your side and with that edit it works 100%.
Unfortunately I can not add a code snipped because it will size the background to stackoverflows viewport and not to the code-sippets viewport.
The effect works fine, but the image is zoomed in on. Any clue as to why?
#hero{
background-image:url(../images/metalWorx_hero.jpg);
width:1020px;
min-height:398px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Well, background-sizing: cover; is the reason why your background image seems "zoomed" as it is making the background image so big that it fully fits over its container. What happens on your case (feeling like its being zoomed in) is that the aspect ratio of the background isnt the same as the aspect ratio of the container. Instead of stretching the background image, background-sizing: cover will oversize the background so much until it covers everything up, leaving no gaps, but the "zooming" might happen.
Here is an illustration of the reason, as I know how bad my english :D
So you can see, the background image will be resized that it fits for the height, but because of the aspect ratio, both of the sides will go out of the container.
Edit #2 - Added some more informations and help
Depending on the real aspect ratios and sizes there are different solutions to it. The "quick and dirty solution" is to use background-size but instead of setting it to "cover", we will set its width and height to 100%. Code:
#hero{
background-image:url(../images/metalWorx_hero.jpg);
width:1020px;
min-height:398px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%; /* Set width and height to 100% */
}
Its a very simple "fix", but its obvious what can happen when the aspect ratio gets distorted:
Real and only way to fix it ;)
If you really want to fix it, you should make sure that your container and background image have about the same aspect ratio and then going back to background-size: cover; (just as in your first post)
I have a background-image in a fixed navigation bar and the same background-image in the main body of our website. The goal is to create the effect of the contents going under the navigation when the user scrolls like on this website:
http://bonobomusic.com/news.php
Here is the site I'm building where the problem is:
http://rattletree.com/wordpress2/
When I have the page at full width for my screen everything looks good, but when I resize the window then the background-image in the header is resizing at a different rate than the one on the body. This is the css I'm using for the header:
#main-header{
position:fixed!important;
background-image:url("img");
background-position-y: -62px;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'm seeing that the image in the header is scaling smaller and smaller in both the x and y axis the whole time, and on the background image it scales for a while on both axis but then at a certain point, it is only scaling horizontally and not vertically. Any help would be appreciated!
Please note: the problem is most obvious when viewing the page at different screen sizes-like a mobile device vs a computer.
Sorry I can comment so I post an answer.
The problem is that your header has a position with 30px in Y. The easiest way is to set the value to 0px.
Else you'll have to use a second background img for header by removing 30px of the original.
Set your header to full width then give the body and the header the same background image and options. Also make sure the background is centered.
Now add something like this. You will most likely have to remove some of the !importants.
#media screen and (max-width: 999px) {
body {
background-size: contain;
}
#main-header {
background-position-y: -30px;
}
}
I used http://quirktools.com/screenfly/ to check upon different screen sizes
Have you tried positioning absolute both the header and body and make them 100% width and height of the window. Then put the background image on both as cover. Then you can make a div that is positioned however far from the top as your header should be and give it overflow hidden.
I have got so far on the background of my new website and now i am stuck, the background image goes less than 100% height if you shrink the browser window.
I want it to stay full size and if you shrink it, I don't want the height to go any less than 100% (showing white)
Code here http://www.bestlincs.co.uk/new/
you can use below code:
html or .classname {
background: url(ImageUrlhere) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use:
body {margin: 0; padding: 0}
and set the background-size property to cover: http://www.w3schools.com/cssref/css3_pr_background-size.asp
In your code you have not defined a height to the image give it a height 100% and it works i tried it in my browser and works fine
The solution depends on your needs - one way would be to specify a min-width and min-height attributes in css instead of pure width. As it will scale to whatever size it needs, then position it fixed to the top left corner (mind you, any "overflow" on the right will be cut off).
Source:
http://css-tricks.com/perfect-full-page-background-image/
A detailed explanation of your problem:
If you set an image to 100% width of its container and do not specify a height, it will always be stretched until it fills out the container, while the height is scaled to keep the image's aspect ratio.
E.g: Take an image that is 200px x 100px large, put it into a 300px wide container with it's width set to 100%. It will be scaled by a factor of 300/200 = 1.5 along both dimension, resulting in an image sized: 300px x 150px.
What will happen, if your image has a different aspect ratio than the user's screen? It will simply stretch to full width, then leave the rest blank. Setting a height as well would introduce even more problems, as your image would get distorted.
HTML:
body {
margin:0;
background: url(image.gif) no-repeat;
padding: 0;
}
Then the background size will be 100%
I have a template for a website, it's an image which i have set as a background image. Now what i need to do is place html over it. For example there an part of the whole template where some images are but eventually when they are clicked they need to do something. So i need to place some divs over the whole template containing the different parts.
I don't know what the right approach for this is. What i've done right now is set the background image like this:
#body{
width:1280px;
height:8000px;
background: url(something.jpg);
background-repeat: no-repeat;
background-position:center;
}
So it always centers the image if you were to resize the window it would stay centered. This works fine.
Now i need to add another div in the body (of course) which needs to stay on top of the image.
I've tried and searched on the internet alot but the div seems to have a position that can't move. so how i resize the window it keeps in the same place.
I hope it's a little clear what i'm trying to do, and keep in mind this is my first time doing something like this so any help is greatly appreciated.
Thanks in advance!
PS: i'm not trying to cover the whole page in the background, just the original size which is 1280 all the time, and if the window gets resized bigger than 1280 in width it needs to center the image.
(if you're trying to set an image as the body's background to cover the whole screen)
Instead of settings width's and height's on your body, you should just set the size of the background to cover
css-tricks.com/perfect-full-page-background-image
body {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
You can do this so the image is always centered
.main{
width:600px;
margin:50px auto;
}
<div class="main">
<img src="path to img"/>
</div>