I am trying to create a responsive design for my app.
I have a big background image and it will show the full size when user has large screen and only show partial if user uses small screen.
I want to place few elements on my app with absolute position but the problem is I can't lock their top and left value because the screen size changes.
I have something like
css
#background{
background: url('BG.jpg') no-repeat top center fixed;
width: 1900px;
height: 1200px;
}
#element{
position: fixed;
z-index: 5;
top: 50%; //looks fine in 1900 x 1200 screen but position is off on 1200 x 1000
left:70%; //looks fine in 1900 x 1200 screen but position is off on 1200 x 1000
}
html
<div id='background'></div>
<img id='element' src='test.jpg' />
How do I keep the position of the element on the same spot when user has small screen? Thanks for the help!
When using position: absolute, you need to make sure that it has a parent with a position attribute other than the default (which is static). If there is no such parent, the document is the effective parent. For your example, I would advise making the img#element a child of div#background like so
<div id='background'>
<img id='element' src='test.jpg' />
</div>
and then adding position:relative; to the #background css style
#background{
background: url('BG.jpg') no-repeat top center fixed;
width: 1900px;
height: 1200px;
position: relative;
}
The reason relative is used, is because it doesn't take the element out of the document flow (like fixed or absolute would) and as long as you don't specify a top, left, 'bottom', or right attribute to the parent (#background in the case), it will stay in the same location as it would with default positioning.
Edit:
I don't think this will work out of the box for you. You need to figure out how to make the image's width dynamic as well. You can either give it a % based width or use media queries.
Edit 2:
Ia also just noticed you have position:fixed for img#element. Change that to position:absolute. that will make it so that it is positioned relative to the position:relative parent rather than the window.
Consider making a javascript function that calculates the screen width. After that add margin-left to #background equal to ( screen width / -2 ). Make #background width & height - 100%
Related
I have got a tiny problem, im creating a website and i want to give an image a max-height. The image may only have the same height of another div.
You can check the layout here: http://bit.ly/1OAGsLR
Its about the 1920x1080 image, and i needs to be the same height as the div with class box left to it. If right the image should scale well.
But im trying all i know but i dont get it working, can someone get this working with CSS or do i need to use Javascript for this?
Thanks in advance!
Your image is looking the way you want when the screen width is at or above 1400px. You should consider using css media queries to move or adjust the image at different screen widths. Your layout could easily be handled using a css framework like foundation or bootstrap which would take care of css media query breakpoints for you.
If you are intentionally trying to not use a css framework, I'd check out this css media queries tutorial to get you started.
You need to make your container div wider.
Your container is 1200px wide, and your boxes are 560 + 40 padding wide each.
That means that the max width of you image is 560px.
Now to conserve it's aspect ratio of 16:9, the max height of the image is 560 / 16 * 9 = 315 pixels.
Okay, your main problem is that heights don't like to be defined this way. I have a solution for you that will 'solve' this issue, but its not very pretty and you might want to look into doing this with javascript anyhow. Below is a very rough example mockup.
body > div {
width: 100%;
max-width: 500px;
background: green;
padding: 10px;
position: relative;
}
body > div > div {
width: 50%;
padding: 20px;
}
body > div > img {
position: absolute;
right: 20px;
top: 20px;
max-width: 50%;
/* make sure to fall back to 80% so theres at least some gutter for older browsers */
max-height: 80%;
/* use calc to make the image the height of the relative parent minus padding */
max-height: calc(100% - 40px);
}
<div>
<div>Push<br />Push<br />Push<br />Push<br />Push<br /></div>
<img src="http://placehold.it/350x150" />
</div>
In short, this will place your image to the right of your box, give it a max-height (because positioning can do that) and a max-width (so smaller screen sizes don't freak out).
Now you could easily translate this a more general system where .box + .boxget a absolute position, or you could define a class for the box that has to push content and add that to the first box, making all other boxes absolute.
I fixed it by using JS, im using the following script:
<script type="text/javascript">
function changeheight(){
var Height = document.getElementById('box').clientHeight;
document.getElementById('imagebox').style.height = Height+'px';
}
</script>
I have a responsive background image with a smaller image positioned over it. I am trying to keep the smaller image at a specific location when the window is resized.
Both images scale properly, and the left position works so far, but not the top position.
img {
max-width:100%;
}
#dot {
position: absolute;
top: 17%;
left: 66.5%;
width: 10%;
height: 0;
padding-bottom: 10%;
}
I have found some questions with answers that suggest:
Vertical Alignment or Positioning with Javascript
I've also looked into .position() and .offset(), not sure if either would work.
I think my best solution would be to calculate the Y offset using the current window height as a reference but I am not sure what my JS or Jquery code should look like.
Here is my jsfiddle:
http://jsfiddle.net/melissadpelletier/xBu79/21/
I'm not sure exactly what you're trying to do with your images, but you could create a new smaller image (green dot) with the same aspect ratio as your background image, and have the dot placed where it needs to be within that aspect ratio. Then stretch the width of that to be 100% and the two images are basically overlapping, but the top image (smaller image) has a transparent background. Not sure if that all makes sense, but I made a new image and did the fiddle thing, which I'm new to: http://jsfiddle.net/ydack/
img
{
width:100%;
}
#dot
{
width: 100%;
position: absolute;
top:0;
left:0;
}
#dotImg
{
top: 0;
left: 0;
width: 100%;
}
I mistakenly placed the green dot's position based on the black outline, not the full background image, so the dot is slightly up and right of where it needs to be. BUT, the position is maintained while re-sizing the window. Hacky, but it could work!
You are definitely gonna need some javascript for this. What you can do is calculate the height and width of the image whenever you resize your browser window. Then simply use some math to calculate the position of the dot relative to those dimensions.
var height = $('#image').height();
var width = $('#image').width();
/* change the fractions here according to your desired percentages */
$('#dot').css({left: width/2, top: height/2});
$(window).resize(function() {
height = $('#image').height();
width = $('#image').width();
/* change the fractions here according to your desired percentages */
$('#dot').css({left: width/2, top: height/2});
});
Try this code: http://jsfiddle.net/LimitedWard/FFQt2/3/
Note that you will need to also resize the dot according to the height/width of the image if you want it to always fit inside that box.
Edit: after further investigation, it is possible to do this in CSS; however, it's a lot sloppier because the dot doesn't follow the image if the window is too wide. This jQuery solves that problem by using pixel-based positioning.
http://jsfiddle.net/sajrashid/xBu79/24/
plenty of errors mainly not closing tags
<div id='background'>
<img src='http://i.imgur.com/57fZEOt.png'/>
<div id='dot'>
<img src='http://i.imgur.com/yhngPvm.png'/>
</div>
</div>
In my intro page I have a really big image in height and width to fit all the resolutions (more than 4000px in width) and I set it as below:
#source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Then, I added some text over that image with these style properties:
.description {
position:absolute;
top:510px;
left:23px;
width:340px
}
And it looks properly (and as I want it to be shown) on my 15.6 inch laptop with 1366x768 resolution.
However when my roommate saw it on his high resolution monitor the description was not on the “right” position. Of course, I understand why this is happening.
My question is how can I keep dynamically the proper position of the description text in all resolutions?
Thank you very much.
Set the distance from the bottom, not from the top. Or set it in %.
EDIT: I've adapted one of my experiments into an example: http://dabblet.com/gist/2787061
The position of the description is set relative to the bottom and the left of the image container (the image is filling its entire container).
In the first case, the distances to the left and the bottom of the image container are fixed, in px.
In the second case, they are in % and change on resizing the browser window.
Basically, the rules that do the trick are
figcaption {
bottom: 5px;
left: 23px;
/* more rules here */
}
in the fist case (fixed distances, in px) and
figcaption.perc {
left: 10%;
bottom: 17%;
}
in the second case (percentage).
Also, please note that you don't need position: absolute or to set the top and the left properties for the image.
However, you do need to set position:relative on the parent of the description box.
For the image to fill the screen horizontally, you need to have margin:0; and padding:0; on the body element and width: 100%; and margin: 0; on the figure element. I've edited my example to reflect these changes http://dabblet.com/gist/2787061
For the image to fill the screen both horizontally and vertically, the easiest way is to not even use an img tag, but simply set the image as a background image for the body and set the height for both the html and the body elements to 100% - example http://dabblet.com/gist/2792929
Be careful for two reasons: one, this will really distort the image and can make it look ugly when resizing the browser window and two, if you need some content below the image you will need to give the the outer element position: absolute and set its top: 100%. Both these two aspects can be seen in the example I've linked to. You can simply remove the content below the image if you don't need it.
use position:relative; for the div that wraps the image, and position:absolute; for the text div
please set percentage
check the example- description box set in horizontal center,
first set position relative into wraper div
.description {
position:absolute;
top:510px;
left:50%;
width:340px;
margin:0 0 0 -170px
}
The div is 50% opaque and is displayed on top of the site's content, and it has a fixed width of 960 pixels (it's created by jQuery).
How can I center it horizontally?
margin: 0 auto; doesn't work :(
margin: 0 auto; won't work for elements that are absolutely positioned. Instead, we can work with the properties of the element itself. Check out the fiddle...
http://jsfiddle.net/UnsungHero97/HnzyT/2/
To center it horizontally is easy since you know the width AND its positioned absolutely. All you have to do is give it 2 CSS properties:
width: 960px;
position: absolute;
/* ... other CSS properties... */
left: 50%; /* 1. move it to the right 50% of the width of the page; now the left side of the element is exactly in the middle */
margin-left: -480px; /* move the element to the left exactly half of its width and now the center of the element is centered horizontally */
If you want to center it both vertically and horizontally, you need to know how wide AND how tall the element is.
I hope this helps.
Hristo
Just subtract the window midpoint from half the width of you element on resize. Here's a simple plugin that you could easily accomodate to center vertically if need be as well:
$.fn.centerMe = function () {
this.css('left', $(window).width()/2 - $(this).width()/2);
};
$(window).resize(function() { $('#yourElem').centerMe(); });
$('#yourElem').centerMe();
See working example →
Is it possible to place 1 DIV inside another DIV and have the DIV inside have a larger width and height than the DIV it is contained within?
Sounds like a riddle....
Basically I want to have a container that the user can set the width and height of. They will have also selected and image, cropped it and resized it using jQuery. The image will be the background of the container, however due to the fact that the background image could be made bigger than the container I want it to be possible for the background to be a DIV that can expand beyond the height and width of its container - To crop the image if you like.
Do able?
Yes, if I'm understanding you correctly
the container would be relatively positioned, the div "inside" would be absolutely positioned inside it -
the absolute positioning co-ordinates and getting the image centered would be done something like this, at default,
#inner {
position: absolute;
top: 0 ;
left: 0;
right: 0;
bottom: 0;
background: url(theimage.jpg) no-repeat 50% 50%;
}
this should center the image in the user sized container
then the "cropping tool" would be able to manipulate the co-ordinates (in an equal measure I presume) either + or - those 0 values, -, negative, ones will allow it to expand outside the "outer" container
$('<div>').attr('id', 'innerdiv').appendTo($('#div'));
CSS
#div{
height: 100px;
width: 100px;
background: green;
}
#innerdiv{
height: 200px;
width: 200px;
background: red;
}
HTML
<div id="div"></div>
http://jsfiddle.net/bKetM/
A background image will be 'cropped' by default. For example, if I have a 500px by 500px div and then I put a 1000px by 1000px image as its background then it will show the top left 500px by 500px of that image as a background. I could set the background image to be centered like so:
background:transparent url(image.png) no-repeat center;