Is it possible to create a fixed-width layout with different background colors on either side of the page, where the background colors extend infinitely regardless of how far you zoom out? Creating a 9000x10 px image would not achieve this effect as it would only work until you zoomed out enough to see the edge. Any ideas or suggestions are appreciated!
Also, just to clarify, the background should cover the full height of the page, not just the height of the window/viewport. Thank you!
Here is a solution that appears to be effective:
<html>
<div id="bg-left"></div>
<!-- rest of content -->
</html>
html {
background-color: green;
}
#bg-left {
background-color: orange;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 50%;
z-index: -1;
}
This code snippet is compatible with IE7+ and is suitable for displaying both small and large amounts of content:
See Live Demo with Lots of Content
See Live Demo with Little Content
HTML Structure:
<div id="left-column"></div>
<div id="right-column"></div>
<div id="main-container"></div>
CSS Styling:
html, body {
margin: 0; padding: 0; border: 0;
}
body {
background: #ccc
}
#left-column, #right-column {
position: fixed;
width: 50%;
height: 100%;
top: 0
}
#left-column {
background: #ccc;
left: 0
}
#right-column {
background: #999;
right: 0
}
#main-container {
background: #fff;
width: 80%;
margin: 0 auto;
position: relative
}
What do you think about this? http://codepen.io/RJSx/pen/dqZOQoX
My initial dissatisfaction with the height: 100%; position: fixed; solution stemmed from my desire to potentially incorporate a background image that would scroll along with the page at a later time, although this consideration did not occur to me when I posed the question. Through experimentation, I discovered that using min-height: 100%; proved to be effective.
<html>
<head>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#container {
width: 100%;
min-height: 100%;
position: relative;
}
#left, #right {
width: 50%;
height: 100%;
position: absolute;
z-index: -1;
}
#left {
left: 0;
background-color: navy;
}
#right {
right: 0;
background-color: maroon;
}
#content {
width: 512px;
height: 100%;
margin: 0 auto;
background-color: white;
}
</style>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="right"></div>
<div id="content">
Hello<br />
Hello<br />
Hello<br />
Hello<br />
Hello<br />
Hello<br />
Hello<br />
Hello<br />
Hello<br />
Hello<br />
Hello<br />
Hello<br />
Hello<br />
Hello<br />
Hello<br />
Hello<br />
Hello<br />
Hello<br />
Hello<br />
Hello<br />
</div>
</div>
</body>
</html>
Despite functioning properly in my browser, for some unknown reason it does not work on jsfiddle.net: http://jsfiddle.net/HktPN/.
By following Matt's example and including a container, the issue can be resolved: http://jsfiddle.net/PNYVe/3/
When using $(".className"), all elements with the class .className are returned. How can I target a specific element by its index number to apply styling only to that element? <html> <head> <script src="https://ajax.googleapis.com/ajax ...
I have been working on an option picker, but now there is a new requirement to make the options configurable. While this shouldn't be too difficult, I am facing some issues with the option picker: Currently, when an item is double-clicked, it will ge ...
I'm currently working with the ionic framework to develop a mobile application. I'd like to incorporate Sweet Alert for displaying success messages. You can find Sweet Alert at . My goal is to include a timer in the success message. swal("Good ...
I have three divs all set to 100% height in order to create a block scroll effect. One of these divs contains text. The issue arises when I resize the window width and the text starts to overlap from the bottom. I want the div height to stretch further to ...
Currently, I am creating a new child theme for Twenty Fifteen completely from scratch. The one area I am struggling with is customizing the appearance of the blockquote using CSS. Here is an example of the custom CSS I have added to the blockquotes within ...
Can someone help me with my website? I'm having trouble with the menu for different pages, it should stay gray for the active page. It was working fine before I switched to Wordpress, but now I'm not sure what the issue is. Could someone take a ...
I am currently working on coding a JavaScript function to allow liking a specific post on Tumblr. I came across this helpful resource for reference. Initially, I attempted using an ajax call instead of modifying the source of an iframe, but unfortunately, ...
My current challenge is as follows: On a webpage, I have a box with jQuery tabs labeled "Enter" and "About" designed to switch the content displayed within the box. UPDATE: The jQuery script in use is shown below: <script type="text/javascript"> ...
Using this particular Bootstrap modal on a website (simplified version with fewer list items): #manufacturer-modal .modal-body { padding: 0; } #manufacturer-modal .nav-item { list-style: none; } #manufacturer-modal .nav-link { font-size: 1.2em; ...
Is it possible to restrict certain options in the Select component similar to how it is done in the Autocomplete component? PS: The options are present in an array. <FormControl variant="outlined"> <InputLabel>States</Inp ...
My role is to notify the user when the entered value exceeds the acceptable range: if (document.myForm.outputPercentage.value <= 0 || document.myForm.outputPercentage.value >= 100) { alert( "Please enter a percentage between 1 and 100 ...
When setting up a Column Chart with Drilldown: The main chart displayed data labels in a blurred black color. However, when clicked, the next columns that appear (the drilled down columns) are clear and easy to read (white color, no blur). I discovered a ...
I have a component where I am trying to dynamically change the color based on the user type. The issue arises when I use gradient colors, as the transition stops working. If I stick to simple colors like blue, red, or green, it works fine. Currently, the c ...
The code snippet can be found here I am a beginner in this field and currently studying a piece of code. I am having trouble understanding the logForm.$invalid.$setValidity line. I have searched online but couldn't find any information about it. The ...
Upon clicking "Add new User", a modal pop-up will appear with a form containing a text field and a checkbox. However, upon clicking the create button, the data is not being posted to the API and the modal pop-up remains open without closing. I would like ...
Utilizing bootstrap 5, yet a bootstrap 4 demonstration may suffice. Clearly, I can accomplish this design without employing bootstrap, however, that is not my current objective. I am curious if there is a feature within the bootstrap framework that I may ...
I have developed a straightforward JavaScript tic-tac-toe game that is functioning smoothly at the moment. The game involves an array that stores X's and O's, prevents the same spot from being selected twice, and determines the computer's mo ...
I'm trying to eliminate the white space above my blue header on a webpage with rounded corners. The header is at the top of the wrapper, but there's some empty space before it starts. Is there a way to make the header start right at the top edge ...
I need to develop a versatile element with bootstrap that can accommodate images of different aspect ratios. To achieve this, I must trim the right side of the picture like so. <div class="container"> <div class="row"> <div class="col-12" ...
I have an image with dimensions of 3051 x 1716 pixels. https://i.sstatic.net/Y3Wi7m.jpg While viewing it on mobile, I would like to adjust it to look like this without cropping the image or uploading it again: https://i.sstatic.net/lJ1NSm.jpg In other ...