I am trying to achieve an effect which can be seen on the https://lexus.com.au website where
no matter what the browser screen height (desktop or laptop etc) the hero image and the cta bar always fill the browser screen.
The height of the hero image varies as the browser height changes.
The image also centres on the main content as the screen changes.
The CTA bar at the bottom of the screen always remains the same height and location.
Is this done with JS using window.InnerHeight or some other method?
TL:DR:
Is this done with JS using window.InnerHeight or some other method? No
There are 2 reasons that contribute to this and while there are likely more, these are the ones I can see without rebuilding what was done just to give you the answer.
They use the background-position: % % to position the image. The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0% https://www.w3schools.com/cssref/pr_background-position.asp
This is what gives the image that look of squeezing under the top banner.
Then these were done to position the element itself within the above div. background-size: cover; display: table; https://mattboldt.com/kicking-ass-with-display-table/
It's important to understand that throughout this the reason for it taking up the full width is simple; width was set to 100%. That is actually the easiest part of the whole effort. However combining the above elements to get the correct effect will take some playing with on a codepen. That being said what I've given you is what you need to know to succeed.
Links below are good links to get you started on fully understanding how to complete this task.
Related
Per the GIF below, as you can see as I increase/decrease the window size the image on the left grows and shrinks as it 's supposed to. What I've done is include the line inside of the "image wrapper" that I have set up. My goal here is when the image shrinks I have the line line up with its respected block of text you see on the right. Right now I have the line positioned as absolute with percentage values for left and top. Is there a way to adjust the rotation of the line for what I'm trying to accomplish? How can I get that line to line up with the title no matter what? Are percentages possible for rotation? (I don't think so)
This raises one concern of mine. Sure, a CSS only solution would be great, but the concern is compatibility with browsers. If the solution can be in JavaScript that would be just as perfect, but I wouldn't know where to start with something like this for JS.
Any other suggestions are welcome.
GIF Example:
Code example used: https://jsfiddle.net/01sxrjkr/ *Make sure the preview window is <768px
You are rotating from the wrong end of the line. Try this instead, then just use media queries to alter the number of rotation degrees in relation to the text on the right for each of the most common media widths. Remember, people don't go around re-sizing their screens, so having it perfect at every single pixel of width is unnecessary and really not possible with what you have going on there. You're image is responsive and your text, of course, is not. therefor as the width of the screen is reduced, your left column decreases in height as your image gets smaller while your right column increases in height as more text wraps.
.line.line-1 {
left: 62%;
top: 39%;
transform: rotate(14deg);
width: 40%;
}
(!) This question could be considered duplicated, however, did not find anything that could fit as a solution in up to 10 topics - I am sorry for that, I am trying to find a solution to this particular situation;
Let me explain the problem,
I'll leave here an image that may help you understand the issue :
I have a full width div, which height will change on page heights alteration.
This div contains full width images covering it, so you can see in the following screenshot :
So I tried to make it full width as well full height, independently of the parent's height
( which is higly vulnerable to changes once its height depends on the distance between the top and bottom of the screen - So anytime we change screen's height, the referred div will as well change the div's height);
The problem spawns here :
When the screen receives a ration between width and height of 1:2 (width:height), then, images will re-size once the page's width (which is img's max width) will not be enough to fill the height, not filling the div as I wished, as you can verify at following screenshot:
(the red part is the parent div of the image)
I will be searching for a solution in javascript/jquery/css
The use of the image as background is being discouraged and it did not work as I tried before
Any tip or indication will be highly appreciated and praised;
If you find this topic offensive or a rule-breaker, please notify so I can delete this question once I do not want to spam this wonderful community.
Thanks in advance ! (accept my apologies for this long question)
With the best wishes,
Vladimir
the property that you're looking for is:
background-size: cover; (for background-image);
object-fit: cover; (for regular images);
ps: the container of the object-fit picture must have overflow: hidden
I don't even know if I'm asking the question correctly. I have to host a third party game without using an iframe, but I have a hard requirement to include a banner for the hosting entity. That takes up 60 pixels at the top of the viewport that the code (which I do not have access to) was counting on using. That banner at the top causes the content to extend below the bottom of the viewport into overflow territory. So I add styling to the canvas element to compensate for the lost space at the top:
max-height:calc(100vh - 60px);
But that screws up the vertical centering, so I also need:
position:absolute;
top:60px;
There. Now all looks great. Until you need to point your mouse at something and you find that the only way you can click is to point it ~60px below the visible click target.
So my question is: How can I "trick" the code that I can't see into thinking that the viewport is 60px shorter (vertically) than it is in reality, so that the click regions line up with their visible counterparts?
Im trying to use css3 scale property, but im facing issues with alignment of preceding elements
I see lots of spacing created after an element is scaled using css3.
Trying to place an images and titles beside it for a list. But when image is scaled the tile is pushed down. don't want to use absolute as it may give bad impact in different devices and page re-size
Here is the fiddle http://jsfiddle.net/sonymax46/xhwcvmj8
Also can you elaborate why this is happening
Can some one help me out.
Instead of scale through the transform property, adapt the width and height of the element to the desire size. If you don't do so, the element is going to keep the original size, resulting in that blank space.
Then you can set correctly the image size using this CSS:
background-size: contain;
background-repeat: no-repeat;
Here you have your jsfiddle updated.
I have a site, elemovements.com, where, on the home page, you can click to view an archive of the news and a little popout appears. I have taken advantage of jQuery Waypoints so that, when scrolling, the popout will follow you down the page. Unfortunately, the way I have it set up, I have its position styled with CSS which works appropriately under the resolution I am using. Unfortunately, not everyone uses 1600x900. My question is (and I know there is no such thing in CSS): is there any way for an element to have fixed positioning relative to another element? In my code, I created a JavaScript object which handles most of the operations for this archive popout called objArchive, and in it, a function called getRight() which I was attempting to use to remedy this situation whenever a person scrolled or resized under suitable conditions. Alas, I could not get it to work. You can take a look at the site here and a majority of the code for it here. Whoever can help, I will definitely give you some credit in the code comments :)
By the way, to open it, look at the right hand side of the title bar for the "Latest News" box and there will be an "Archive" link. Thanks!
When you make an element fixed it positions it relative to the browser window, and only the browser window. However, since your website is centered, you have the center of the window as a constant and can position it relative to that center line. If you give your .sticky class these rules, you will have the position you're looking for.
.sticky {
position: fixed !important;
right: 50% !important;
margin-right: -592px;
}
These rules positions the .sticky element so it's right edge is at the center line of the browser's width, then moves it 592 pixels to the right (which is half of you're containers width + the width of the element).