How to make an image fit the background. Here is what I have done so far?
Here is my css attempt:
#bio{
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
This is hosted on JsFiddle
The good alternative to regular img is a div with background-image, it's easier to position it. Here is the working fiddle:
https://jsfiddle.net/oy3wrzwv/3/
And a snippet:
#bio {
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
background-image: url("https://images.unsplash.com/photo-1499561385668-5ebdb06a79bc?auto=format&fit=crop&w=1949&q=80");
background-size: cover;
background-position: center center;
}
<div id="bio"></div>
Since you are trying to make an image the background, you might want to consider removing your HTML code, that is:
<img src="https://images.unsplash.com/photo-1499561385668-5ebdb06a79bc?auto=format&fit=crop&w=1949&q=80" id="bio">
And use this as your CSS code:
body {
background-image: url(https://images.unsplash.com/photo-1499561385668-5ebdb06a79bc?auto=format&fit=crop&w=1949&q=80);
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: flex;
top: 0;
left: 0;
}
In the code above I also changed the position to flex so that the image as a whole can be seen and doesn't get hidden, as I had seen when you set it to fixed instead. Let me know if you need any more help!
Related
I'm stucked. I've tried different solutions but it doesn;t work for me - I do something wrong.
I want to get 2 divs (there is more, but it should be enough to solve the problem): header and menu. Both of them have got background-images. I want to set 'menu' directly below 'header' using responsive approach.
<div id="header_main"></div>
<div id="menu"></div>
i CSS:
#header_main{
background-image: url(../images/headerPapyrus.png);
background-size: 100%;
background-repeat: no-repeat:
margin: 0;
padding: 0;
width:100%;
height: auto;
position: absolute;
}
#menu{
background-image: url(../images/bgMenu.png);
background-size: 100%;
background-repeat: no-repeat:
margin: 0;
padding: 0;
width:100%;
height: auto;
position: absolute;
}
I want to get divwith dimensions in line with its background images widht and height, but responsive. Please give me any adice how I can do it properly.
Right now two images appear on top of each other, that's why you would only be able to see one of them.
Try to wrap them in a seperate div and give display:flex to that div. This way you could achieve what you want I guess.
Change your position on the header to position: relative; and set both of them to display: flex;
Like this:
#header_main{
background-image: url(../images/headerPapyrus.png);
background-size: 100%;
background-repeat: no-repeat:
margin: 0;
padding: 0;
width:100%;
height: auto;
position: relative;
display: flex;
}
#menu{
background-image: url(../images/bgMenu.png);
background-size: 100%;
background-repeat: no-repeat:
margin: 0;
padding: 0;
width:100%;
height: auto;
position: absolute;
display: flex;
}
<div id="header_main">header</div>
<div id="menu">menu</div>
These are specific methods for creating responsive background:
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
And why do you give the elements position absolute and take them out of the normal flow? You can use maybe :
#header_main{
position: relative;
};
#menu{
position: absolute;
top:0;
left:0;
};
The background image of the header of my site is stretching and warping in weird ways on certain mobile phones.
Here's the link to the site - https://jaels-creations-stage.callgage.co/
Here's the code for the background image, it s a child of the header container:
.header .background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: center 92%;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
z-index: -1;
/* On Load Animation */
opacity: 0;
}
I've been trying to figure this out for a long while now, I can't replicate it on my macbook, and with devtools remote devices I can't figure out a proper way to fix it. Any help would be greatly appreciated.
Try height:auto; that will cause css to retain the image's natural aspect ratio
I think is because you need to set the eight to auto
bg {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
/* set your own */
min-width: 1440px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Use this if you have your images set to fixed. It will promote the layer */
transform: translate3d(0, 0, 0);
}
I have this in my CSS:
.cover .cover-image {
z-index: -1;
position: absolute;
top: 0px;
width: 100%;
height: 100%;
background-size:100%;
background-size: cover;
background-position: center;
}
I also have this in my HTML:
<div class="cover-image" style="background-image : url('./bkg.jpg');">
bkg.jpg is a 1939x1131 image - bigger than any of my monitors. On my smallest (1280x1024) monitor, it displays fine:
On my medium (1440x900) and large (1920x1080) monitor - both of which are smaller than the image - it shows a bit of white between the image and the scrollbar:
Why does this show, and how do I fix it?
Check your image source
https://chipperyman.com/dota/bkg.jpg
You have a white bar on your image.
double on background-size your code, please fix background-size:100%, otherwise you will get issue.. And i mean you not need using background-size because your image already bigger than your screen..
you need normalize html, body
html, body {
padding: 0;
margin: 0;
}
there.
Basically you are having an absolute positioning bug here. Just add 'left: 0px;' to your .cover .cover-image selector as per following:
.cover .cover-image {
z-index: -1;
position: absolute;
left: 0;
top: 0px;
width: 100%;
height: 100%;
background-size:100%; /* old browser fallback, but I'd delete it */
background-size: cover; /* duplicate of background-size */
background-position: center;
}
Here is also a jsfiddle example of fixing it: http://jsfiddle.net/webyourway/868L6hhg/
I'm trying to have a full screen image, easy enough with css using the code below.
width:100%;
height:100%;
background: url('photo2.jpg');
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
but the image is already placed in an html div, see here
<div class="fixed-background">
<img src="photo2.jpg"/>
</div>
It need's to be exactly how it would be using the css version, the only difference would be the image is called in html and not in the stylesheet.
try this
<style>
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.myimg {
height: inherit;
}
</style>
<html>
<body>
<div class="fixed-background">
<img src="public/dbs/images/1.jpg" class="myimg" />
</div>
</body>
</html>
Use object-fit: cover; on the <img> tag:
<div>
<img src="photo2.jpg" style="object-fit: cover;"/>
</div>
that parameter is a rather new thing (not all browsers supported), but that's the way to go. See also http://caniuse.com/#search=object-fit
Without using a background, consider this:
#mydiv {
position: absolute;
top: 50%;
right: 50%;
bottom: 50%;
left: 50%;
margin-top: -100px; /* (calculate half the height of your image) */
margin-left: -100px; /* (calculate half the width of your image) */
}
Full screen Image? you could do something like this through HTML
<div class="fixed-background">
<img src="photo2.jpg" height="100%" width="100%">
</div>
http://jsfiddle.net/pj73m4po/
EDIT:
or are you looking for something like this?
http://jsfiddle.net/pj73m4po/1/
Try the following: http://jsfiddle.net/pj73m4po/4/
Put your image in a div 100% high and wide. If you don't want your image to be stretched you don't want to use width and height seperately.
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.fixed-background {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
img {
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
}
Instead use min-width and min-height. if you have a predefined image you can adjust the position in css. If you don't unfortunately you need javascript to center it.
The points that I gather from your css are the following:
Center the image
Fix the position of the image (so it doesn't scroll with the page)
Cover the viewport, scale proportionally to fit
That said, I suggest the following given your html
.fixed-background{
position:fixed;
width:100vh;
height:100vh;
overflow:hidden;
}
.fixed-background > img{
position:absolute;
width:100%;
height:auto;
top: 50%;
transform: translateY(-50%);
}
Honestly, I haven't tested the above but I would suspect you might get some weird results using fixed and absolute positioning together. But since the code defines the width and height directly using viewport units, it should be good. You might need 100vh of margin applied to a sibling element to get things to line up because position:fixed; will break the element out of the document flow.
I want to fill my page with a background image and have the text aligned in place with that background. With the below code, the background image loads at the top of the page, and the text goes under it. I know I can use the "background: " function, but the way it is done in my below code allows for automatic resizing, regardless of browser size (i.e., mobile devices have small browser sizes). So, I just want the background image to go behind the text.
<html>
<head>
<title>Title</title>
<style>
img.bg
{
min-height: 100%;
min-width; 781;
width: 100%;
height: auto;
top: 0;
left: 0;
z-index: -1;
}
#media screen and (max-width: 781)
{
img.bg
{
left: 50%;
margin-left: -390.5;
}
}
#container
{
position: relative;
width: 781;
margin: 50 px auto;
height: 758;
border: 1px solid black
}
#left
{
position: relative;
left: 1.280409731113956%;
top: 14.51187335092348%;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
width: 50%;
height: 50%;
color: #FFFFFF;
position: relative;
}
p
{
font: 14px Georgia;
}
</style>
</head>
HTML
<img class="bg" src="background.jpg">
<div id="container">
<div id="left">
<p>
Text
</p>
</div>
</div>
</body>
</html>
Make your BG image have a z-index of 1, and your #container div to have a z-index of 2. Does that work?
img {
position: relative;
z-index: 1;
}
#container {
position: relative;
z-index: 2;
top: 0px;
left: 0px; /*or whatever top/left values you need*/
}
Just use position: fixed for your background image http://dabblet.com/gist/3136606
img.bg {
min-height: 100%;
min-width: 781px;
width: 100%;
top: 0;
left: 0;
position: fixed;
z-index: -1;
}
EDIT (I wish there was a way to make it more visible than this)
OK, after reading the comments for the original question, I understand that the purpose is to have a background that scales nicely for any display sizes.
Unfortunately, quite a lot of mobile devices have a problem with position: fixed - you can read more about this here.
So the best solution in this case is to use a background image, not an img tag, having the background-size set to 100% (which will stretch the image - example), or to cover (which will scale the image such that it completely covers the screen - example)
Well, maybe you can also try that css:
body{
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
it's should cover all youre page even when page size is changed