Looking at this site I've noticed that the background image that displays the page bleeds out of the sides of the monitor. Is there a way to fix this?
img src="img/laptop.png" id="laptop" class="tour" alt="laptop" />
The laptop is a png with a transparent center. I was then apply a class to the laptop which would apply a background image behind the laptop. ie
.tour { background: url("../img/tour.jpg") center top no-repeat; }
The problem occurs when some of the images are larger than the width of the laptop
The simplest way would be to make the background of the image of the laptop white, which would then cover up the part of the image which 'bleeds out'.
Another quick solution would be to resize all the background images so that they fit properly within the monitor.
I think the way to do it properly is to have an absolutely positioned element which fits within the bounds of the laptop screen and shows the image.
Something along the lines of
<div class='image-container' style='position: relative;'>
<div id='background' style='position: absolute; left: 100px; right: 100px; top: 30px; bottom: 120px;></div>
<img src='img/laptop.png' />
</div>
This would need some proper measurement/testing of the actual margins on the image, and would need changes to the javascript and css to work/look right.
Don't specify a width for the "container clearfix" class, and then add an appropriate width, say about 920px to the monitor, so that it's size is more appropriate to cover the photos you're using.
Related
I have an image on my page and it's created using photoshop. The image has text in the middle. When I minimize the window the image shrinks and the text becomes smaller instead of scaled.
I tried:
.img{
width: 100%;
height: 100%;
}
How can I make it when I minimize the window the text will stay the same and the image will be cut from the sides?
Thank you
img element is meant to show a whole image. To display only a part of image, you'd better use a block element with background specified in css. This allows you to specify the size of viewport and position of the image separately.
For example, in html,
<div class='my-image'></div>
in css,
.my-image {
background-image: url(path-to-image.jpg);
background-position: center center;
background-size: auto auto; // This is the default
}
This allows you to position the image centered in the div. No matter how big the div it is, the image size will stay the same(thus only the center part is visible because of the clipping).
For more details about background in css, please read https://developer.mozilla.org/en-US/docs/Web/CSS/background
I have an image gallery with name slider1_container and it's style properties are specified within the HTML code such as:
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width:700px;
height: 600px; background: #191919; overflow: hidden;">
This works perfectly, except that the slider is wider than the div box beneath this. This div box is 100% of the width of the parent class "rightcolumn", and my slider1_container div is ALSO within this class, but since it's width of 700px is set within the HTML code, it doesn't seem to be responsive at other viewport sizes.
I've tried to use media queries at various points to change the width of the slider1_container to something smaller than 700px, but it seems that the width specified in the HTML code overrules that.
[DEAD LINK REMOVED, PLEASE UPDATE]
If I set the 700px to auto, the width works perfectly BUT the image gallery shows only black when you load the page, until you choose another photo it will quickly appear (javascript issue it sounds).
If you resize the viewport on my site you can see the image gallery's width doesn't match the div box below it How can I make this responsive like the other div?
Thank you!!
Read the documentation for whatever slideshow plugin it is that you are using. It most likely has settings for responsiveness. If not, you can find a million different responsive slideshow plugins here
I'm looking for a solution how to position a div to exact position on background. I have a background image ( http://www.jewelryplatform.com/coming-soon.jpg ) and I need to position whole div with form, etc. on the center of the image where you can see the box for that. Second problem that the image will be resizing with windows size. Is there any easy way how to do that?
do you have much experience with css and media queries?
You can add breakpoints in your css and then assign specific style to an element at that breakpoint.
#formDiv{ position: absolute; left 50%; top:50%}
#media only screen and (max-width: 995px) {
#formDiv{ position: absolute; left 25%; top:25%}
}
I've created a fiddle that will keep a form over the center of a div.
The key is to do left: 50% for the form that will center it, and then negatively margin-left half its width to keep it center. The same applies for the top: 50%. Because everything is positioned using percentages it will move when you resize the box.
As mentioned in the previous response, you can also use media queries to resize the size of the form at different resolutions as well.
UPDATE
Also you can consider resizing the background image when the screen size changes. This can be achieved by setting the background-size property with again 100%. Here is a great resource for how to use it
I've a div that I placed on top of a background image. The div is clickeable so it brings a popup dialog. The background image has got dots on which the div circles are to be placed.
The problem:
It works fine when both the background image is left aligned and the div elements have "position:absolute; left:x; top:y" but my problem is when I try to center align the image the absolute-x and absolute-y of the div are not being in the spots they have to be in the image.
Also when i change the size of the window the location of the div square shifts. I tried both absolute and relative positioning.
What I have:
<style>
.containerdiv { position: relative; width:100%; }
.cornerimage { position: absolute; top: 100px; left: 130px; }
.circle {
border-radius: 50%;
display: inline-block;
margin-right: 20px;
background: none repeat scroll 0 0 #701470;
height: 24px;
width: 24px;
}
</style>
And my div's here:
<div class="containerdiv" align="center">
<!-- my background image -->
<img border="0" src='http://www.infokerala.org/sites/default/files/images/barry_boehms_spiral_model.jpg' alt="">
<!-- trying absolute positioning -->
<div class="circle" id="bar" style="top: 142px; left:875px; position: absolute;"></div>
<!-- trying relative positioning -->
<div class="circle" id="foo" style="top: -68px; right: 332px; left:-332px; position: relative;"></div>
<div>
As you can see in the image, as I resize the window, the absolute positioned div starts moving off of the image.
The "relative" positioned div disappears after some time. I'm not sure why?
All I want is the div circles to be in fixed positions on top of the image regardless of the window size or where in the page I embed the image or any resizing activity.
What I wanted:
How the div moves out of it's initial location:
Finally even the "relative" positioned div also disappears, after I slowly shrink the window size :(
I understand that "absolute" positioning is absolute position with respect to the window, but why how can I make the div's stick to the original spots I wanted them to be?
Instead of using a div have you considered using an image map? You can make it look the way you want and it's positioning is based on the image so it will stay in the correct position. You can also attach the clicks as you would to a dive.
I know that image maps are considered a bit Web 1.0 but I have seen them used very effectively in exactly this sort of situation to produce very dynamic results with the addition of JavaScript and JQuery. This JQuery literary works greate: ImageMapster
Where as the floating div's solution has always seemed a bit like forcing a square peg in a round hole.
Since you know the size of the background image, it's easy to calculate percentile offsets instead of absolute offsets.
Say you have an image of 500x500 pixels as background, and you want to position the circle at position 50x50. If you put it at left:50px;top:50px the image will remain at that position even if the parent container resizes. However if you put it at left:10%;top:10% its offsets will scale along with the positioning parent.
so when you position it absolute, it is going to stay there, and when your background image moves because of the window resize, it is going to go away from the top of it.(actualt the circle is staying in its x,y position, and it is the background that is moving)
your solution is to go with relative.
I put your code in jsfiddle and the relative works fine
works fine here, not sure why you said it disapears after sometime? maybe some JS removes it?
You will need to add an event that recalculates the absolute position of the div either on page resize and onload:
<script>
function recalc(){
var width, height;
width = $('.containerDiv').width();
height = $('.containerDiv').height();
width = width / 2;
height = height / 2;
$("#bar").css({"position":"absolute","top": width + "px","left": height + "px",});
$("#foo").css({"position":"absolute","top": width + "px","left": height + "px",});
}
$(window).load(function(){ recalc();});
$(window).resize(function () { recalc();});
</script>
I need to list the thumbnail images on a page, all of which have fixed height and width. Once I hover any of them, I want the larger image display at a fixed position, i.e. top:50px and left:50px within its wrapper. The size of the larger image is also fixed, i.e. width:100px, and height: 100px.
I followed the instruction on
http://cssdemos.tupence.co.uk/image-popup.htm
but I could not figure out to put the larger image at a fixed position.
I would appreciate if you could help me in this
Thanks,
Position fixed, places the image(element) an amount of pixels based on the whole window. Not to the wrapper.
Position absolute places the image an amount of pixels based on its wrapper.
So try adding this.
.larger-image {
position: absolute;
top: 50px;
left: 50px;
}
If for some reason it doesn't work, please post your relevant code.