How to display a diagonal background image that is not a pattern - javascript

I'm having a hard time with a diagonal background image. This is not a "pattern", but a full image used in two types of layouts. (Image: http://i.imgur.com/mcWseu1.jpg)
On one template, the image should remain fixed on the page at 100%
height, positioned to the top right and scrolls with the page.
On the second template, the image should maintain the same aspect
ratio as it would in template one, but it should not be fixed.
Instead, it should scroll up with the rest of the page.
I've been able to achieve the desired result for template one, but I'm having a hard time with template two.
Is Javascript the only solution here? If so, any recommendations? Again, the challenges I can't fix:
Get the image to maintain the same aspect ratio as it would in template one (if it's 100% height to fit the window in template one, then it should size at 100% height in template two with the exception of being fixed) This is to maintain consistency between pages using separate templates.
Thanks for the help.
Edit: I have no code to reference for the actual challenge I'm facing. But here is the solution I've found for the first template:
CSS (applied to an img element):
.abovefold {
width: auto;
height: 100%;
position: fixed;
top: 0;
z-index: -1;
}

I believe you're looking for the CSS background-attachment attribute. To fix a background, simply set it as such:
.example {
background-image: url('http://i.imgur.com/mcWseu1.jpg');
background-attachment: fixed;
}
http://www.w3.org/community/webed/wiki/CSS_shorthand_reference#Background
I've demonstrated this in a fidde: http://jsfiddle.net/GHDbM/
When it comes to dimensioning the background, you'll want to set the background-size attribute:
.example {
background-size: auto 100%; /* Adjust to element height */
}
The auto in the above example is for width and the 100% is for height.
http://www.w3.org/TR/css3-background/#the-background-size
Another fiddle for this: http://jsfiddle.net/sk2RY/

Related

How do i make part of a CSS background fit perfectly to a browser

I am new to CSS and so i dont really know how to describe it but here is an example:website
As you can see the background image at the top of the website fits perfect in height and width to the space of any browser regardless of the resolution. As you scroll down the page it keeps the same style where a specific background color fits closely to the space of the browser. I have tested this on a laptop as well as mobile and it fits closely each time. How do i achieve this? Is it doable purely from CSS or do i have to involve JavaScript/Jquery, etc? I have seen many websites use this specific style and i would like to understand hoe it is done.
I am not asking specifically for code, just an answer that states what it is i should be searching for. Code is appreciated however.
You can use your browser's developer tools to see exactly how that site creates the effect. It's a combination of CSS and JavaScript.
The CSS:
.homepage-intro.homepage {
background: url("//d1sva73gxwx496.cloudfront.net/images/homepage/bg-intro-2039a477.jpg") no-repeat;
background-size: cover;
}
The JavaScript then explicitly sets the height of the <div> to match the browser window.
There are different approaches. If you inspect the site you linked, they are using background cover to accomplish this. background-size: cover; It will fill up the width and height of the current div.
See this article for more info: https://css-tricks.com/perfect-full-page-background-image/
That site is using JavaScript to set the height of the <div> that has that background image. Combined with background-size: cover;, that should do it.
If you want to make sure the bottom of your div hits the bottom of the browser window, you can do this via CSS.
CSS
div {
height:100vh;
}
or
body, html {
height: 100%;
}
div {
height: 100%;
}
You will require CSS and jQuery to do this effectively (and also to allow for cross-browser support).
CSS
//Add this to your background image's CSS.
background-size: cover;
background-repeat: no-repeat;
position: relative;
background-position: center;
height: 100%;
jQuery
var viewportHeight = jQuery(window).height();
//wrote an if statement to allow for a minimum height. You can remove this if statement if you don't need it.
if(viewportHeight>500){
jQuery('page-wrapper').height(viewportHeight);
}else{
jQuery('page-wrapper').height(500);
}
To solve this issue, you need to accomplish two tasks:
Make the background-image always adjust to the size of the container. This is done, as others have already stated, by assigning background-size: cover; to the container element on which you placed the image as a background-image. Add background-position: center; for better results on low resolution devices as well as portrait orientation.
Make sure the container element stretches 100% of the viewport's width in both directions. Block level elements per default grab 100% of the available width, but you need to set an explicit height to match the desired layout. This can be achieved by applying height: 100vh; (100% viewport height) to the container element. Check if the unit vh is usable on the devices you plan the layout for: http://caniuse.com/#search=vh
If you need to support browsers that do not recognize vh it's probably the easiest solution to use javascript (or jQuery) to dynamically assign a height to your container element.
This is how it's done in jQuery for a <div id="my-container-element"></div>
$("#my-container-element").height($(window).css("height");
Same in pure Javascript:
document.getElementById("my-container-element").style.height(window.innerHeight+"px");
Try the following in your CSS sheet:
html { background: url(myImage.jpg) no-repeat center center fixed; background-size: cover;}
It will fill the whole page with your background Image.

Image max-height

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>

Responsively position an image at specific target over background image

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>

Have Image take up as much of window as possible, without exceeding borders

Now the title of the question may have been worded the wrong way.
I want the image to take up 100% of the width or heigh (I guess whichever is larger). Kind of like when you have a photoviewer and there make be a black border on the sides or the top, depending which way it is.
Obviously if it's a very small image I don't want it to stretch, I never want any of the images to stretch, I just want them to fill as much of the window out as they can.
For example, when you load an image on Google, it doesn't show it's fullest resolution. It shrinks it down to fit within the borders of the page if it is to big. Then you can click on it to zoom in if you want.
How would I accomplish this? Thanks.
I think you would actually need the following:
.container img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
This requires a container with an explicit height set to work.
Example:
http://jsfiddle.net/AtxYb/4/
This is pretty easy to accomplish with CSS alone:
.container img {
max-width: 100%;
height: auto;
}
The max-width ensures that it never exceeds 100% of the width of its container. height tells the browser to size the image normally (eg. it's not going to stretch it width-wise, but not height-wise) and is included for older browsers.
You can of course also reverse this if you wish to match a container's height instead of width.
edit:
As pburgess suggests, if you wish your image to match either width or height, you need to declare both. See this jsfiddle: http://jsfiddle.net/XxgkG/
.container img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
}
Note this will not work in IE6 and is shaky in IE7. If you're coding for these sad, lonely browsers you should check out this answer.
Demo Fiddle
img{height:auto;width:100%;}
Try re-sizing the window - The image will take up the maximum space .

How to keep text over a huge image in proper position on all resolutions?

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
}

Categories

Resources