So i have this image right here
"http://i.imgur.com/eh71foN.png"
My problem is that whenever i resize the window the Mass Effect image doesnt resize with it.
It becomes like this
"http://i.imgur.com/jaDV7jG.png"
I've been trying to figure this out for a while. Can anyone point me in the right direction?
#MassEffectSign {
background: url(masseffect12.png) center top no-repeat;
top: 25px; left: 750px; z-index: 2;
padding: 250px;
position: absolute;
}
My blue background
#bodyBorder {
background: url(navyblue.jpg) center top repeat-y;
padding: 1000px;
opacity: 0.7;
background-attachment: fixed; }
Use img tag instead background image in CSS.
img {width: 100%}
Use percents for the relevent values.
top: 25px; left: 45%;
This makes the amount of space between the left edge and the image relative to the window size. Play around with the value a little to center it and you should be good.
Your positioning is absolute, so it will move independently of the scale. Put that inside a relatively positioned div and then it will work.
For instance,
<div style="position:relative;">
<div id="MassEffectSign"> </div>
</div>
Hope this helps.
Related
I have been having trouble with my code and I don't know why. The site allows me to scroll to the right, like I have some image or something there, but I don't. Why is this happening?
I have looked into margin but I don't find anything.
body {
background-image: url('icon/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 1439px 851px;
margin-top: 850px;
}
div.relative {
position: relative;
left: 255px;
bottom: 805px;
}
<body>
<div class="relative">
<img src="icon/folder.png">
</div>
</body>
The div is width: auto so when it is rendered, it takes up as much space as is available horizontally.
It is also position: relative and left: 255px, so it is offset by 255 pixels from the left. This does not affect its size (which is determined before the positioning is applied).
Since it is sticking almost 255 pixels out of the side of the document, a scrollbar is added so the user can see it.
If you want to give an element a left margin, then give it a left margin. Don't mess around with positioning.
Relative positioning is almost never useful when combined with left, top, etc. It is mostly useful for providing a context for the absolute positioning of an element's descendants.
It's because you have the left property set to 255px
div.relative {
position: relative;
left: 255px;
bottom: 805px;
}
It's moving the div over 255px, so it's creating the scroll.
So, I set "width: 20px" to the class and it fixed, try it
div.relative {
position: relative;
left: 255px;
bottom: 805px;
width: 20px;
}
I wanted my background image to stay at the same position. So I made use of
background-attachment:fixed;
When I discovered that iOS does apparently not support this property, I decided to put a fixed background div into the DOM. This actually works pretty well:
#background {
top:0;
left:0;
width:100%;
height:100%;
position:fixed;
background-position:50% 0%;
background-repeat:no-repeat;
background-attachment:fixed;
background-image:url("images/mark-bg.png");
}
At the first look, this works great in iOS too. But then I recognized, that Safari scrolls the DIV up, to where it would have got scrolled, if it wouldn't be fixed.
Now I ask myself »What the hell...?!« I mean... Why does iOS scroll an element that is explicitly told to not do so?
Is there any intelligent solution?
Here is a complete Demo
EDIT
I just found out, that not the element moves itself, but the background image moves...
I found a quite suboptimal solution, but at least it works. I don't use background-image in CSS anymore but put a img tag inside the background div and position it absolute:
#background img {
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
}
Here is the fiddle
Unfortunately, the paragraph "this is text" is not vidible anymore. Lucky, thats it's just for background...
Also the image is not centered anymore, nor resized correctly :[
Edit
I added the following CSS to fix the positioning:
#background img {
margin-left:auto;
margin-right:auto;
}
Julian's answer was very helpful to me.
It solved part of the problem, which was to prevent scrolling of the background image by replacing it with a static image in a fixed position div, avoiding Safari's faulty interpretation of "background-attachment: fixed".
But it left me with an image that I couldn't center within the viewport such that the center of the image was always on the center of the viewport.
This is normally background-position: 50% 50% and background-size: cover, but not when we don't have a background-image at all.
So I replaced Julian's inner <img> with a <div> having similar settings.
Then I added the background-image and properties to that div, EXCEPT FOR background-attachment which I left out.
This resulted in a div which took up the entire viewport and was fixed to the viewport, and which had a child div filling it completely, and that child div had a static background image set at position 50%/50% and size cover.
Works great!
My inner div styles are as follows:
#div_background > div
{
top: 0px;
left: 0px;
width: auto;
height: auto;
right: 0px;
bottom: 0px;
position: absolute;
margin-left: auto;
margin-right: auto;
display: inline-block;
background-image: url(/images/background.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
With the parent div styles as follows:
#div_background
{
display: inline-block;
position: fixed;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
right: 0%;
bottom: 0%;
z-index: -1;
background-color: #A0B4C8;
}
And the HTML is simply:
<div id="div_background"><div></div></div>
I consider this a hacky solution, but a necessary one due to Safari's bug.
A simple way of thinking of it is that rather than using background-attachment of fixed, we're creating our own fixed background and manually attaching a new div with the background image to that.
Thanks, Julian!
I have a div box that in the HTML code is below all the other content and not nested into anything else. In the CSS I placed the div on the top right of the site, and when I change the window size so that it doesn't fit, it jumps down on the site. I am not allowed to change the HTML code (it's a school assignment).
Is there any way I can make this jumping div box stay in place relative to the main content?
In the div box I have placed a background picture because this is the only way to add a stand-alone picture without changing the HTML. The teachers added these extra div-boxes in the code just for this.
The div's CSS (if it helps):
#extraDiv1 {
background-image: url('images/koala.png');
background-repeat: no-repeat;
background-size: 250px;
width: 250px;
height: 370px;
float: left;
margin-left: 20px;
margin-top: -610px;
position: relative;
z-index: -1;
}
You can use the top and left attributes to position your box properly. Since you're using relative positioning, this will position it relative to its normal position. Therefore, if you want to line it up with where you said you want it, you would end up with something like this:
#extraDiv1 {
background-image: url('images/koala.png');
background-repeat: no-repeat;
background-size: 250px;
width: 250px;
height: 370px;
position: relative;
z-index: -1;
border: 3px solid red;
top: -610px;
left: 660px;
}
Hope this helps!
I want to make a device-independent animation in HTML5/CSS3. That means I have a background image, specifically drawn so that its edges can be cut off, and I am using it in a div element with background-size: cover, like this:
#main-image {
background: url(intro1-1.jpg) no-repeat center center fixed;
background-size: cover;
height: 100%;
width: 100%;
overflow: hidden;
z-index: 0;
}
#propeller {
background: url(propeller2.png) no-repeat;
position: relative;
top: 265px;
left: 1080px;
z-index: 10;
background-size: 100% 100%;
width: 18%;
height: 12%;
}
<div id="main-image"><div id="propeller"></div></div>
On top of the background layer, I want to draw the animating layer. Here comes the trouble: how do I position the transparent animating parts to a specific position in the full (non-scaled) background image?
I'd also need to scale the animation layer using the same ratio as the background was scaled. But how do I do that?
SO in effect, I'm looking for a way to load the HD background image, define the HD animating layer on top of it, and then apply the cover to fill the full browser screen.
What is the simplest way to do this?
In my experience this is hard to do in pure CSS. I've made something similar to what you're asking here: http://jsfiddle.net/ahhcE/
Here's the propeller specific code:
#propeller {
background: url(propeller2.png) no-repeat;
background-color: blue;
position: absolute;
top: 50%;
left: 50%;
margin-left: -9%;
margin-top: -6%;
z-index: 10;
background-size: 100% 100%;
width: 18%;
height: 12%;
}
I positioned it absolute just for ease, but you're likely going to want it relative if it's positioned relative to the parent div.
(sorry for the colors, my replacement for your images)
The problem is that on the top margin, and height percentages, the browser inherits those values from the width of the window. So you'll notice that if you resize the view window the box doesn't stay perfectly centered. I've usually solved this in the past using javascript. Something like this:
function heightAdjust() {
var windowHeight = $(window).height();
totalMenuHeight = $("#menu").height();
document.getElementById('menu').style.marginTop = windowHeight / 2 - totalMenuHeight / 2 + 'px';
$('.thing').css("height", windowHeight+'px');
}
Hopefully that helps. Centering vertically is really your only issue here, you can also hack this successfully using table styling which is what a few sites use for vertical positioning. More on that, and other solutions here: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/
What I'm trying to achieve without using JS can be seen on jsfiddle.net/k2h5b/.
Basically I would like to display two images, both centered, one in background and one in foreground:
Background Image: Should cover the whole window without affecting the aspect ratio, which means that the image will always touch two opposite edges of the window, but the image will be cropped.
Forground Image: Should be inside the window without affecting the aspect ratio, which means the image will be always touch two opposite edges of the window, but the image will not be cropped.
It doesn't matter if it's a <div> or an <img> tag, as long as they are displaying the images.
Asume also that the image sizes are known upfront and can be used in CSS or HTML part.
So my question is: is it possible using only CSS or CSS3?
If it's not possible I will accept the answer that will be as close as possible to my goal.
Examples:
When the background image is cropped from the top and bottom:
When the background image when it's cropped from left and right:
After looking at #Kent Brewster's answer, I think I could achieve all the requirements of OP.
This doesn't have the problem of foreground image being cropped and you can also specify constant margin around the foreground image. Also div is being used instead of img tag, because we are using background images. Here is the link and here is the code:
<div id='bg'></div>
<div id='fg'></div>
#bg {
position: absolute;
height: 100%;
width: 100%;
background-image: url(http://i.imgur.com/iOvxJ.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
#fg {
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
opacity: .7;
background-image: url(http://i.imgur.com/HP9tp.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
}
Try this:
<html>
<style>
body {
margin: 0;
}
#bg {
position: absolute;
height: 100%;
width: 100%;
background: transparent url(bg.jpg) 50% 50% no-repeat;
background-size: cover;
}
#fg {
position: absolute;
height: 90%;
width: 90%;
top: 5%;
left: 5%;
background: transparent url(fg.jpg) 50% 50% no-repeat;
background-size: cover;
opacity: .7;
}
</style>
<body>
<div id="bg"></div>
<div id="fg"></div>
</body>
</html>
If the scaling requirement is flexible, it might work. See http://jsfiddle.net/k2h5b/5/ to see it run.
Yes, it's possible.
Basically I just made the background image the background for the <body> (doesn't have to be the body of course), and then put the image inside that with a small margin.
<body>
<img id='fg' src='http://3.bp.blogspot.com/-OYlUbWqyqog/TeL-gXGx3MI/AAAAAAAAHRc/bdqvvvaeC7c/s1600/bald-eagle3.jpg'></img>
</body>
css:
body {
margin: 0; padding: 0;
overflow: hidden;
background: url('http://wallpaper.zoda.ru/bd/2006/07/21/2c7b4306fd22f049f331d43adb74a5f7.jpg') no-repeat left top;
}
#fg {
margin: 20px 20px;
opacity: 0.7;
}
obviously if the window is too big, there'd be issues. You could (I guess) use media queries to pull in different image sizes based on window size.
edit — OK, well for the image, if you do want it to crop and retain the right aspect ratio, then I think you'll have to know the image size ahead of time to do it so that it works out. Lacking that, here's another revision.
<body>
<div id='fg'> </div>
</body>
css:
body {
margin: 0; padding: 0;
overflow: hidden;
background: url('http://wallpaper.zoda.ru/bd/2006/07/21/2c7b4306fd22f049f331d43adb74a5f7.jpg') no-repeat left top;
}
body, html { width: 100%; height: 100%; }
#fg {
margin: 2%; width: 96%; height: 96%;
opacity: 0.7;
background: url('http://3.bp.blogspot.com/-OYlUbWqyqog/TeL-gXGx3MI/AAAAAAAAHRc/bdqvvvaeC7c/s1600/bald-eagle3.jpg') no-repeat center center;
}
If you know the image dimensions, you could then set max-height and max-width. (I'll try that too :-)
edit again To get the background to crop in a centered way, you'd need to set the position to "center center" instead of "left top". (Or "center top" if you just want it centered horizontally.)
Vertically centering elements with CSS without cutting-edge non-standard features (flexible box layout) is hard. That may be something to do with JavaScript. I'll say that one problem with any JavaScript solution like that is that it really slows the browser down. If you must do it, I would suggest introducing a little time lag so that you don't try to recompute the layout on every resize event. Instead, set a timer for like 200 milliseconds in the future where the work will get done, and each time you do so cancel the previous timer. That way, while a person is dragging the window corner it won't burn up their CPU.
edit even more ooh ooh yes #Kent Brewster's answer with the vertical centering is good - I always forget that trick :-)
There is no way to achieve this effect using only CSS, for two main reasons:
Because you are trying to resize your image, you cannot use the background property and must instead use an <img> tag. Your image will always try to take up as much room as it can if the width and height are not set. Thus, the aspect ratio will not be maintained, or your image will be cropped.
The other caveat of resizing the image is that you will not be able to vertically-align it to the center of your page without knowing its dimensions.