I'm working on a website and I want to have an image that automatically adjusts to fit any screen size. Users should be able to scroll down to see more content or another image. A similar effect can be seen on this site: . Any suggestions would be really helpful. I've already tried setting my image width and height to 100%, as well as using background "cover," but neither solution allowed for scrolling.
Aside from the parallax effect on the image shown in this illustration, you can incorporate elements from another solution provided by Roko C. Buljan along with the code snippet below to achieve a similar outcome.
jQuery:
The height of the viewport minus the height of the .header is what determines the size of the #page, #bg, and .splash. Refer to the script for more details.
$(window).on('resize load', function() {
$('html').removeClass('no-js');
$('body,html').css('opacity', '1');
viewportheight = $(window).height();
headerheight = $('.header').height();
bg1 = '50';
bg2 = $('header').height();
$('.splash, #bg, #page').height(viewportheight) - (headerheight);
$('.splash.intro, #bg').css({
'background-position': bg1 + '% ' + bg2 + 'px'
});
});
var images = [
"http://121clicks.com/wp-content/uploads/2014/08/rammy_narula_photography_25.jpg",
"http://ewallpapershub.com/wp-content/gallery/widescreen-wallpapers/widescreen-photography_wallpapers.jpg",
"http://www.travelklix.com/wp-content/uploads/Amazing-Night-Cities-Photography5.jpg"
];
var $body = $(".intro"),
$bg = $("#bg"),
n = images.length,
c = 0; // Loop Counter
// Preload Array of images...
for (var i = 0; i < n; i++) {
var tImg = new Image();
tImg.src = images[i];
}
$body.css({
backgroundImage: "url(" + images[c] + ")"
});
(function loopBg() {
$bg.hide().css({
backgroundImage: "url(" + images[++c % n] + ")"
}).delay(3000).fadeTo(1200, 1, function() {
$body.css({
backgroundImage: "url(" + images[c % n] + ")"
});
loopBg();
});
}());
CSS:
The CSS provided here is for demonstration purposes only. Note that the text and links will not be displayed in white as depicted.
body,
html {
margin: 0;
padding: 0;
color: #fff;
font: 100%/300% sans-serif;
}
.no-js body {opacity:0;}
*,
*:before,
*:after {
box-sizing: border-box
}
a {
color: #fff
}
.header {
background: #000;
padding: 20px;
position: fixed;
left: 0;
right: 0;
z-index: 3;
}
.splash {
width: 100%;
position: relative;
display: table; /* for vertical alignment */
}
.intro {
}
.about {
background-color: red
}
.contact {
background-color: teal
}
.content {
width: 100%;
text-align: center;
font-size: 300%;
position: relative;
vertical-align: middle;
display: table-cell;
position: relative;
z-index: 1;
padding-top: 50px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
font-size: 0%; /*removes extra spacing */
}
nav ul li {
display: inline-block;
font-size: 16px;
}
nav ul li a {
padding: 5px
}
footer {
background: #444;
padding: 20px;
clear: both;
}
.splash.intro,
#bg {
background-color: #000;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
#bg,
#page {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
#page{ background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAACBJREFUeNpiZGBg6GGAgEUggokBDTACsR6yAIYKgAADAE0GAWM9RhAyAAAAAElFTkSuQmCC);
}
HTML tag
<html class="no-js">
HTML
<header class="header">
<nav>
<ul>
<li><a href="#intro">intro</a></li>
<li><a href="#about">about</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</nav>
</header>
<section class="splash intro" id="intro">
<div class="content">Section 1</div>
<div id="bg"></div>
<div id="page"></div>
</section>
<section class="splash about" id="about">
<div class="content">Section 2</div>
</section>
<section class="splash contact" id="contact">
<div class="content">Section 3</div>
</section>
When does overflow hidden not work as expected? If a child element overflows and has absolute positioning If the parent with overflow hidden is statically positioned When a second parent wrapper with relative positioning is added Why does this happen eve ...
I'm having an issue with a parent element and a child element in my CSS code. The parent has the following properties: position: relative; overflow-y: unset; And the child has these properties: position: relative; left: -70px; Everything looks good ...
I was attempting to customize a material UI element, specifically trying to increase the size of the icon. Below is the style code I used: export const Icon = styled(Box)({ color: "gray", position: "relative", "& ...
Hey there! I've been working on creating a HTML page that showcases multiple images. Everything is running smoothly on my localhost, but when I try to access it online, the images take forever to load. Any suggestions on how I can cache image URLs in ...
I'm currently making updates to my portfolio website, but for some reason, the scroll reveal animation has suddenly stopped working. I made a few edits and now it seems to be broken. /*===== SCROLL REVEAL ANIMATION =====*/ const sr = ScrollReveal({ ...
I have a div element that I want to align on the right side of the screen, but the problem is that it doesn't adjust its position as the content dynamically expands and exceeds the width of the page. Despite conducting extensive research, I haven&apos ...
I'm currently working on an interactive music app that mimics the functionality of a piano. Users are able to click on different boxes on the screen, triggering a unique musical note to play. While I initially considered manually collecting all the I ...
Can someone please assist me in locating a jQuery Amazon-style menu example? I would like to implement something similar and am hoping to avoid having to write it from scratch. Thank you! ...
In my case, I have two distinct pages: let's call them the first and second pages. On the first page, I utilize an owl carousel slider with a tag that links to a specific slide on the second page's owl carousel slider using an ID. Meanwhile, on ...
I have been trying to implement a JavaScript code that loads a specific stylesheet based on the user's browser. However, it seems like the code is not functioning correctly as none of the stylesheets are being displayed. I have meticulously reviewed t ...
Can anyone explain how Facebook manages to vertically align its photos without using padding or margins? I've looked into their img tag and its parent, but neither seem to have any spacing properties. Although there is a vertical-align attribute prese ...
I have been exploring the resizing behavior of elements in reveal.js and trying to understand how they dynamically adjust. If you resize the page height, you can observe that the elements shrink up to a certain extent along with the page. However, when in ...
I typically utilize the following method to arrange my list items into columns: ul.col-list > li {width: 30%; display: inline-block;} However, I have encountered an issue where if the text within a list item overflows onto the next line, it pushes dow ...
If I want to display the same div in different positions dynamically on my page, how can I achieve that? My page has a table with two rows and two columns, each containing an Embed button. When these buttons are clicked, a div is shown with a list of site ...
Can the HTML Select attribute be customized to have a flatter appearance? Although I can set the border to be 1px solid, the dropdown part still appears 3D and unattractive. ...
I am currently working on creating a "reference document" section within a Webhelp Responsive website that I have developed using a DITA map. My goal is to display a typical document list with unique reference numbers ([1], [2], [3]...[N]) followed by rele ...
Struggling with creating a responsive navbar using Bootstrap 5? The navbar-brand is causing issues with letters overflowing over other elements, and the toggle-icon is not aligning properly. Check out my Codepen for reference: https://codepen.io/namename12 ...
Although I have been learning HTML, CSS and jQuery, one area that always trips me up is selectors. Currently struggling with redundant selectors. I am attempting to customize the ul and li elements after collapsing the li, however, the selector doesn&apos ...
I've been experimenting with creating pop up links that appear next to a button when the button is clicked. So far, I've tried using various CSS selectors like :active and :hover without success. Additionally, I attempted to use selectors such a ...
Hey everyone, I'm really struggling with this issue. I recently set my AppBar to have a position of "fixed". However, now the appbar is no longer contained within its container and instead spans the entire screen. I've been trying to figure it ou ...