I'm doing a simple website.
In this website I have several divs in different layers (one in front of the other and so on).
With the two divs in the back there's no problem, but with the divs in the front when I resize the browser they move and I don't want that.
The weird part is that the back divs are created in the same way.
So basically what's messing my page around are: #icone_esquerda and #icone_direita.
Below is my code:
<style type="text/css">
#fundo{
background-image:url("tileable_wood_texture_copy.png");
background-repeat:repeat;
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
}
#frente{
background-image:url("luinguica.png");
background-repeat:no-repeat;
background-position:top center;
position:fixed;
width:inherit;
height:inherit;
left: 0;
top: 0;
z-index:50;
}
#icone_esquerda{
background-image: url("botao_facebook.png");
background-position: bottom center;
background-repeat: no-repeat;
height: 50px;
left: 45%;
margin: -25px 0 0 -25px;
position: fixed;
top: 45%;
width: 50px;
z-index: 60;
}
#icone_direita{
background-image: url("botao_mail.png");
background-position: bottom center;
background-repeat: no-repeat;
position: fixed;
width: 50px;
height: 50px;
left: 53%;
top: 45%;
margin: -25px 0 0 -25px;
z-index: 60;
}
</style>
</head>
<body>
<div id="fundo">
<div id="frente">
<a href="http://www.facebook.com/confrariadaempada">
<div id="icone_esquerda">
</div>
</a>
<a href="mailto:info#confrariadaempada.pt">
<div id="icone_direita">
</div>
</a>
</div>
</div>
</body>
When I resize the browser the divs with the ids icone_esquerda and icone_direita move!!
Can anyone help me please?
Thanks in advance.
Fixed is supposed to keep it in the specified area based on screen - where it is, what size it is, etc.
Absolute makes it stay put, no matter where or what size.
Really, both of them should rarely (if ever) be used. It's better to learn to use Relative positioned elements with floats as needed (cleared properly, of course).
Related
So I have a transparent image I want to place ontop of an image to create a "fade out" effect. I also have a background image. So all up there is three images.
This is my code
<div class="jumbotron">
div class="hero-dashboard">
<img class="center-block" src="../../img/hero-dashboard.png">
<div class="fade-bottom">
</div>
</div>
CSS
.jumbotron{
background-image: url('../img/hero-bg.jpg');
background-repeat: no-repeat;
background-size: cover;
.hero-dashboard img {
position: absolute;
z-index: 500;
height: 30px;
width: 500px;
.fade-bottom{
background-image: url('../img/hero-footer-fade.png');
position: absolute;
z-index:10;
bottom: 70%;
top: 10%;
right: 50%;
width: 100%;
}
}
}
They all have to be inside the "jumbotron" div.
Its on the page but it doesn't seem to be listening to the positioning. Can anyone help?
1- The parent div (jumbotron) should have relative position when children are absolute and should have height and width to be visible.
.jumbotron {
background-image: url('../img/hero-bg.jpg');
background-repeat: no-repeat;
background-size: cover;
position:relative;
top:0;
left:0;
width: 500px;
height:30px;
} // correct this closing tag
.hero-dashboard img {
position: absolute;
z-index: 500;
height: 30px;
width: 500px;
} //correct this
.fade-bottom{
background-image: url('../img/hero-footer-fade.png');
position: absolute;
z-index:10;
bottom: 70%;
top: 10%;
right: 50%;
width: 100%;
}
// } remove this
// } remove this
2- also correct opening tag < before div class="hero-dashboard">
3- correct the order of opening and closing tgas in your css {}. They seem weird!
Thanks for your help.
I closed the css tags {} like that because I need them to sit within the jumbotron div class. As they are the children of it. Correct me if I'm wrong but I was under the impression that it was the right way to do it.
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've tried changing the pixels to percentages and nothing seems to work. If I make it in 1920x1080 and then switch to a lower resolution the website looks all cluttered and weird.
Here's the CSS code:
body
{
margin: 0px;
padding: 0px;
background: url("images/Background.png")
}
#header
{
position: absolute;
top: -160;
left: 420;
right: 0;
}
.headerImage1
{
margin: 0px;
padding: 0px;
position: absolute;
width:100%;
height:100%;
background-repeat:no-repeat;
}
Here is what it looks like on a different resolution: (The correct way would be centered)
http://puu.sh/6RgHg.jpg
EDIT: HTML part:
<body>
<div id="header">
<div class="headerImage1">
<img src="images/Header.png">
</div>
I think it's cause your ratio gets off when you use:
width:100%;
height:100%;
Try this instead:
width: 100%;
height: auto;
That way the ration doesn't mess up, if you want the background to not mess up, try this:
background: url("images/Background.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
EDIT:
If you mean centering the image, absolute poitioning is the absolute size of the browser, the full screen. While relative is the current position of the brower.
I would use relative for cross-device purposes.
My project depend on blocks- if you click href in menu for example "about" site getting you to block with backogrund image. Backgrounds of blocks must adjust to the resolution user. Everythnig work great but if we want to change size browers in width images just unatural distort. I thnink that it is impossible to solve this problem, if we want to stay with:
width:100%;
height:100%;
SO How to make divs with bacgrounds image which will adjust to the resolution of widscreen, but if we change size of browers to custom example:365x900 background-image will still in the same resolutions(the same resolution means that size is dependet on the screen resolution)
the best situation will be then when bacground-images will adjust to the standard resolutions, but if we will change browers size for example on 200x900 then they will don't change theirs sizes and still stay in maximum(maximum size is dependent on the screen resolution)
CSS
#raz {
background-size:100%;
background-repeat: no-repeat;
margin-top: -300px;
border: 0px;
padding: 0px;
left: 0px;
width: 1200px;
height: 100%;
overflow: hidden;
z-index: 0;
}
#bg_raz {
position:absolute;
text-align:center;
width:100%;
height:100%;
}
#dwa {
background-size:100%;
background-repeat: no-repeat;
margin: 0px;
border: 0px;
padding: 0px;
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
#bg_dwa {
position:absolute;
width:100%;
height:100%;
}
HTML
<div id="dwa">
<img id="bg_dwa" src="http://lorempixel.com/output/city-q-c-600-325-4.jpg">
</div>
<div id="raz">
<img id="bg_dwa" src="http://lorempixel.com/output/city-q-g-600-325-7.jpg">
</div>
JSBIN
If you use background-size: cover; and add background-image on #dwa, you can delete <img/>.
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