Can someone please guide me how to get an image full screen so that it stays in the centre both horizontal and vertical like the link provided.
http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
I'm only after the background bit and i need the image in a div apposed to in the css like in the example as i am using it for a slider in wordpress.
In order to make your LayerSlider display at 100% height and width, leave the "Slider height" attribute in "Slider Settings" blank, and then use a script like the following to set the height:
<script type="text/javascript">
function resize()
{
var heights = window.innerHeight;
document.getElementById("layerslider_1").style.height = heights + "px";
}
resize();
window.onresize = function() {
resize();
};
</script>
Insert the script into your footer.php file before the closing body tag. If your slider ID isn't number 1, then change "layerslider_1" to the correct ID.
you can add style to the div element
<div style="background: url(images/xyz.jpg) no-repeat center center fixed;">...</div>
I just took the css from your sample page and copy/pasted!
Related
So, I have been working on this webpage, and I encountered weird issue, Image should be full size, and I would like to have possibility to scroll horizontally, but it is not working, even though I added overflow-x: scroll in my css.
here is the link to the website.
http://des-iis.ucn.dk/mmdi0915/1055435/WebApp/map.html
Any solutions, Thanks in advance!
Hi, I have tested your code and here is the solution just remove
margin:auto from body i.e. from your css so that body's css will look
like this
body {
font-family: Futura;
font-size: 2em;
color: white;
background: url(../img/BG_nowplaying.jpg);
background-size: cover;
}
You have a issue that your image gets 100% of the width or height of the body, because of the background-size: cover attribute.
The background-size: cover attribute won't overflow the div, since it's a background and not a content.
So, instead of making it 100% via CSS, you should try javascript to make the scroll size correctly.
Maybe you should try a solution like this with javascript:
function fixSize(){
//your image div
var imageDiv = document.getElementById("mapImage");
//your actual image size, I got the values from the image on your example
var imgWidth = 1042;
var imgHeight = 667;
//the size of the body, it gets the current body width and height
var bgWidth = document.body.offsetWidth;
var bgHeight = document.body.offsetHeight;
//the percentage of the body size vs the image size
//this tells which size should be bigger than the body
var dimensionX = bgWidth / imgWidth;
var dimensionY = bgHeight / imgHeight;
if(dimensionX > dimensionY) //if the width is bigger than the height, fix height
{
imageDiv.style.height = (imgHeight * dimensionX);
}else{ //if the height is bigger than the width, fix width
imageDiv.style.width = (imgWidth * dimensionY);
}
}
This should work fine,
you just need to call it when the body loads (onload) and when the body rezise (onresize).
Maybe you could use a <img> tag instead of a background, it can be easier to manipulate the overflow.
I hope I helped ya.
I have a container div that cover the screen with set ratio.
I want to place some elements with absolute position and to be responsive (scale down or up).
I have something like
http://jsfiddle.net/hsD2G/2/
When I shrink width or height of the browser. The element location will change and looks off. Can anyone help me about it?
Again, this is probably not the optimal solution. At least CSS can be used partly, to center the highlights image, or using %width. If you could, somehow, make the background image containing DIV to be squared, you could do it only with CSS.
Here is the Fiddle with the jquery solution.
$( document ).ready(function() {
function update(){
var top=20,left=40;
var height = $(window).height();
var width = $(window).width();
var highlights = $('#cover-img img');
if (height > width){
// Image limited by width
var blank_top = Math.round((height - width)/2);
highlights.css('top',blank_top+top);
highlights.css('left',left);
// make it responsive 1/3 ratio
highlights.width(Math.round(width/3));
}else{
// Image limited by height
var blank_left = Math.round((width - height)/2);
highlights.css('left',blank_left+left);
highlights.css('top',top);
highlights.width(Math.round(height/3));
}
}
$( window ).resize(update);
update();
)};
Hope this helps
I am a Doctor working on a small departmental website. I am using a two-column design within a wrapper "maincontainer" . The wrapper contains a "topsection", a left-floated "navigation", a "contentcolumn" div to the right and a fixed position "footer".
The wrapper "maincontainer" has a background colour and is centralized.
I wish to re-size the "maincontainer" to the height contentcolumns + 140px in case scrolling is required. based on my limited knowledge, I am using a JS code (below). However if I put any images in "contentcolumn", the "maincontainer" remains short and "contentcolumn" overshoots the "maincontainer".
I seek help on correcting this behavior.
Thanks
Vivek
Full Code is here: http://jsfiddle.net/AuURL/
resize.js
$(document).ready(function() {
var maincontainer_height=document.getElementById('contentcolumn').clientHeight + 140;
$("#maincontainer").css("height",maincontainer_height + "px");
});
$(document).ready(function() {
$(window).resize(function() {
var maincontainer_height=document.getElementById('contentcolumn').clientHeight + 140;
$("#maincontainer").css("height",maincontainer_height + "px");
});
});
I am working on a site and I don't want to repeat the background in the y direction.
I know how to do that.
But after the image I don't want background to becomes white or any other color.
I would like it to fix when it reaches that place or to let the background scroll slower then the rest of the site so I wont get to a white part.
Thanks a lot
I found this thread while I was looking for a solution to just this problem. I managed to write a short jQuery script adapting the hints given by Alex Morales.
With the following code, the background-image of the body scrolles down with the rest of the site until its bottom is reached. You can take a look at my homepage (http://blog.neonfoto.de) to see what it does.
$( window ).scroll( function(){
var ypos = $( window ).scrollTop(); //pixels the site is scrolled down
var visible = $( window ).height(); //visible pixels
const img_height = 1080; //replace with height of your image
var max_scroll = img_height - visible; //number of pixels of the image not visible at bottom
//change position of background-image as long as there is something not visible at the bottom
if ( max_scroll > ypos) {
$('body').css('background-position', "center -" + ypos + "px");
} else {
$('body').css('background-position', "center -" + max_scroll + "px");
}
});
This is actually the very first thing I did with JavaScript and JQuery, so any improvement would be great!
It's css3 so it's not super well supported, but I would look at the background-size property.
This is just off the top of my head but I think you will probably have to create a separate div containing the background image. If you place it in your markup before the main content and position the main content absolutely, it will sit behind the main content and at the top of the page. So:
CSS:
#background_div
{
background: url(images/some_image.png);
height: 600px;
width: 900px;
}
#main
{
height: 1200px;
width: 800px;
background: rgba(0, 0, 0, 0.25);
position: absolute;
top: 0;
}
HTML:
<div id="background_div"> </div>
Then what you do is you use javascript (I recommend jQuery) to detect the div's position on the screen.
jQuery:
This code grabbed from http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/
var $scrollingDiv = $("#background_div");
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop()) + "px"}, "slow" );
});
So I got the webpage to go full screen now but I am using height 100% for all my css attributes and now I am getting a scroll bar on the right side.
http://www6.luc.edu/test/cabplan/maps/index2.html
when i change the #content_container to height 89% it changes it but its looks different on other screen sizes. How do I make it so that the map is always the height up until the footer with the "esri" logo on the bottom right above the footer as well
This would be something better suited for jquery. You can call it to resize the height on load and on window resize.
To get the window height you would use
windowHeight = $(window).height();
You take this and assign it to a variable and subtract the heights of the header and footer. And in set the css by using
${'#content_container').css({width: windowHeight+"px"});
Then if someone resizes the window you run the same options in a function like the following
$(window).resize(function() {
//update stuff
});
EDIT
$(document).ready(function(){
windowHeight = $(window).height();
divHeight = windowHeight - 100 - 100; // heights of your header/footer
$('#content_container').css({height: divHeight+'px'});
});
$(window).resize(function() {
windowHeight = $(window).height();
divHeight = windowHeight - 100 - 100; // heights of your header/footer
$('#content_container').css({height: divHeight+'px'});
});
you can replace the 100's for static calls of height by assigning variable and call $('#divid').height(); Since your header is position:absolute, if you subtract the header then you will need to position the div from the top the same px.
To call js include the following before the javascript above.
<script src="http://code.jquery.com/jquery-1.6.4.min.js" />