positioning a background image using css/javascript - javascript

I'm really new into html/css/javascript and I need some help with a site I'm trying to design.
My URL is this one: http://www.wideconcept.com/test2/test.html
It's a full-page background site, with the background image being responsive. The problem is when the user clicks on the "photos" link, and then on '1': the image that gets displayed on the screen as the new background is not positioned as the original background image, and also the height of page increases (the user can now scroll down).
How can I change the html/css code so that, when the user clicks on the 1st image, to display it in the same way as the background image?
Thanks!
EDIT - To be more specific: My main problem is that when I click the 1st photo link, the image is not displayed in the same position and dimensions as the original background image, even though the css properties for that are the same as the original background css properties.

I just realized your design was having some scroll position for the background image( which seems fine in firefox but not in chrome )
To fix the problem:
img { //line no. 375
display: block;
height: 1px;/*this fixes your bug*/
}
Another problem I found is that your div with id background, so add the following rule inside #background:
#background {
z-index: 1; /* to fix the layer bug*/
}

I think that you can define the main background in that way:
body{
overflow: hidden;
position: absolute;
min-height: 100%;
width: 100%;
height: auto;
top: 0;
left: 0;
background: url(assets/bg100.jpg) no-repeat center center;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
#Add the browser prefixed CSS:
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
#And
background-size: cover;
}
And then when the user clicks the photos buttons change the background image url through jQuery/javascript.
For example, using jQuery this should be similar to this:
<script type="text/javascript">
$(document).ready(function() {
$('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');
});
</script>
Hope it helps.

Just like Halbano said, the problem are the <div id="background"> and the <div id="background-image">
You can fix it by doeing the following:
<div id="background background-image"></div>
Do this at the Background div.
Al of the sudden the image will drop a bit but that is simply fixed with css. Also a Menu with a button will pop-up. Apperantly the manu was there already but i could not see it in Chrome.
Good luck

Related

centering image overlaying another with xray effect

The issue I’m having here is with the x-ray image behind the one in the front. They do not line up. It only does when i stretch the browser out to 1920px. Anything smaller than that causes it to misalign. Note that I purposely set the image to be at 100% width which I know is not responsive.
I want to keep the effect of the image getting cut off on the right and left of the browser. Ideally I'd like both images to be centered and aligned when I decrease the size of the browser.
Here is the Github link:
https://gist.github.com/siravani/71b8d447acaca8b34acfcab82af58c06
If you added a fiddle that would have been a lot easier but all you need to do is add background-size:cover to #flesh css rule
html, body, #flesh {
position: relative;
margin: 0;
height: auto;
max-width: 100%;
background: url("http://www2.yapstone.com/l/109192/2017-04-04/4c61s2/109192/37539/buildings.jpg") no-repeat;
background-position: center;
background-size:cover;
}
this way your background image will fit in container and will match with the original image.
Here is a working fiddle https://jsfiddle.net/w2jjaLn5/

Div with image over another div

I want to show an image over a menu in the right, but it doesn't work on IE and Microsoft Edge on Windows 10.
<div class="menuDiv">
<ul id="menu">
<div class="menu_image"></div>
<li><a><img src="img/image_1.png"></a>
<ul id="seccion_1"></ul>
</li>
<li><a><img src="img/report_image.png"></a>
<ul id="seccion_2"></ul>
</li>
</ul>
</div>
menuDiv uses menu of themeRoller of jqueryUI
.menu_image
{
right: 0px;
position: absolute;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
}
This is how it looks on Chrome and Firefox
This is how is looks on IE
How can I show the image on IE?
I set a similar example on jsfiddle
https://jsfiddle.net/kzxfu7j4/
add
.menu{
display: relative;
}
to your css or change your .menu_image as below:
.menu_image
{
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
float:right;
}
Edit:
By the way make sure that the div has proper height and width, you can simply change its height and width to match the image height and width.
try this :
.menu_image
{
position: absolute; z-index: 9999;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
width: auto;
height: auto;
float:right;
}
If that not work, maybe it's the 'content' that the problem
I found a solution, I just set ":before" on the class menu_image and works
.menu_image:before
{
right: 0px;
position: absolute;
content: url(../../../../../lib/img/image_logo.png);
background-repeat: no-repeat;
/* background-position: 98% 0%;*/
width: auto;
height: auto;
}
The issue is your content CSS attribute. This is only valid when applied to ::before or ::after psudo-elements:
https://developer.mozilla.org/en/docs/Web/CSS/content
You have two options:
1) If the image is important in the context of the content (so you definitely want all users to see it) simply add an <img> in the markup.
Also, since you're positioning the images with absolute positioning, it makes more sense to me to add the actual <img> tag and position them directly as opposed to positioning empty div elements and setting the image as a background.
If the images represent navigational buttons, use this method 1.
2) If the image is not important to the content context, you can add it as a background image the conventional way, using:
background-image:url(...);
https://jsfiddle.net/rwhxpmfm/
Background images have accessibility issues (for example, they're not included when a webpage is printed on paper and screen readers can't access them...but screen readers can access an <img> element's alt attribute) so only use them if it's just for decoration and not part of the content's context.

Making some kind of see-through glass image in css/html/js

When viewing this website: http://myankle.co.uk/faq/
Whenever you scroll down or up, the image of the ankle changes. I know that you can make a div opaque and put an image behind it, but how is this effect being done? The image seems to move with the page.
This is achieved by setting a background as background-attachment: fixed. The effect is a basic implementation of parallax.
A good article to get you started is http://davidwalsh.name/parallax
An example class to apply this would be:
.parallax {
background-image: url('http://demoimage.com/image.jpg');
background-color: none !important;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed; // For mobile this should be scroll to fix bugs with ios
overflow-y: hidden;
}
You add a background-image to body that is position: fixed; and then make html content on top of it transparent, so you can see the background-image. It's not moving with the page, that is an illusion.
That element uses a background-attachment CSS property to fix the image relative to the screen:
If a background-image is specified, the background-attachment CSS property determines whether that image's position is fixed within the viewport, or scrolls along with its containing block.
elem {
background-attachment: fixed;
}
JSFiddle demo.

CSS: Resize background image rather than cutting off

I am using javascript to resize a div as the browser resizes, and to set it initially when the page loads. (Yes, I know it needs to degrade gracefully.) The reason I can't do it all via CSS is because there is a fixed nav bar with a constant height at the top of the screen that needs to be taken into account. I want to resize the div (and its gradient background) to fit the browser window, but when I change the CSS height property it just cuts the image off instead of resizing it, which means the next section of the page will not transition properly. Is there an easy fix to this?
Here's the CSS I'm using right now:
#homepage_aboutstrip {
background-image:url('home/images/gradient-about-background.png');
background-repeat:repeat-x;
position:absolute;
margin-top:0px;
width:100%;
height:1050px;
z-index:1;
}
And using IMG tags rather than background-images would work obviously, but it isn't an option here.
You can do it with single line css. try this if it works
background-image:url('home/images/gradient-about-background.png');
background-size: cover
Quality of image may be disturbed if it expands too much
It works for me on IE7 as well.
background: url(../img/url.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: 0 40px; /* Only if you want clip out space for fixed navbar */

CSS/JavaScript to crop image

How to target a specific location on the image to be cropped using css or javascript, simple way without big scripts,
Picture before :
I want the highlighted location on the following image to be viewed :
Not the exact highlighted though, just trying to explain it doesnt has to be from the very top, i want to select specific image scales,
AND how to resize is after cropping ?
Update 2022-05-27: A new property object-view-box will soon make this a lot simpler: https://ishadeed.com/article/css-object-view-box/
One approach is to use an element with overflow: hidden that has the image as a child, which itself is absolutely positioned within the context of the original element. The result being, the size of the overflow: hidden element masks the image.
Here's an example of the approach:
HTML
<div id='crop-the-cats'>
<img src='http://i.stack.imgur.com/ArS4Q.jpg'>
</div>​
CSS
#crop-the-cats {
width: 100px;
height: 80px;
overflow:hidden;
position:relative;
}
#crop-the-cats img {
position: absolute;
top: -60px;
left: -70px;
}
​See http://jsfiddle.net/Da9CT/
Another approach is to use the image as the background of the image and reposition it using background-position:
HTML
<div id='crop-the-cats'></div>​
CSS
#crop-the-cats {
width: 100px;
height: 80px;
background-image: url(http://i.stack.imgur.com/ArS4Q.jpg);
background-position: -50px -60px;
}
​See http://jsfiddle.net/Da9CT/2/
You can't crop image using javascript / css but you can position it inside an element with overflow hidden: http://jsbin.com/ebenem/1/edit
Let me know if that helps!

Categories