I'm trying to create my page so that there are background images covering the side of the page while having nothing in the center as that's where the content will be. I want these images to stay fixed where they are, even if the user resizes the window so they're off-screen. I know how to at least set up the images but not how to keep them in place.
I think one example I can think of is how http://www.halolz.com/ is set up.
Usually the way this is done is by applying a background image to the HTML body and then placing all the content of the page into a container that's centered on the page.
HTML:
<body>
<div class="container">
My content
</div>
</body>
CSS:
html, body {
padding: 0;
margin: 0;
}
body {
background: red; /* change this to your background image */
}
.container {
background: white;
width: 400px; /* adjust this to the proper width */
margin: 0 auto;
}
JSFiddle: https://jsfiddle.net/13xaqh6z/
Related
On this page http://www.prllighting.com/, I have a Photoplus widget next to a video, (below the main banner) in separate bootstrap columns and I do not understand why when the page goes below 1200 pixels the widget goes underneath the iframe video. I put them both in DIVs and defined them like this:
<div class="photoplus"><script type='text/javascript.....</script></div>
<div class="productpage-video"><iframe width="640" height="360"
src="https://www.youtube.com/embed/..."></iframe></div>
.photoplus {
display:inline-block;
width: 200px;
height:332px;
}
.productpage-video {
display:inline-block;
}
How do I edit it, so that they never overlap?
Your "photoplus" class has fixed width of 200px and it should be percentage width. (100%)
And also inner content of it also should be adjustable width like 100%;
And "productpage-video" inside this class, iframe has fixed width. That one also should be 100%.
.photoplus {
display: inline-block;
height: 332px;
width: 100%;
}
.photoplus iframe {
width: 100% !important;
}
.productpage-video iframe {
width: 100% !important;
}
But anyway when small sizes (for mobile sizes), better to move the video to second line.
I have a page with the following HTML structure...
<html>
...
<body>
<div class="wrapper">
...
</div>
</body>
</html>
The .wrapper is being set at min-width: 1100px for reasons I won't go into. Therefore when the browser is resized to less than 1100px I want a horizontal scrollbar to appear.
My CSS is as follows:
html {
overflow-x: scroll;
height: 100%;
}
body {
overflow: auto;
}
.wrapper {
min-width: 1100px;
margin: 0 auto;
}
For some reason the only horizontal scrollbar showing is one when you've scrolled vertically down to the bottom of the page, and it appears sort of "within" the main browser frame, above the main browser horizontal scroll area. I want the main horizontal scrollbar of the window to be the one that is available.
Here is a diagram of my problem: http://oi62.tinypic.com/r06m1z.jpg
And a codepen: http://codepen.io/anon/pen/ocxvs
Thanks in advance for any help!
Its because your document (body) isnt stretched to the full height of the viewport (html), you need to assign height:100vh, also remove your overflow settings so you dont get 2 scrollbars appearing (one on body one on html).
Simply change your CSS to:
html,body{
height:100vh;
width:100vw;
margin: 0;
padding: 0;
}
Is there a way to for web browsers to enable scrolling the entire height of a background image with background-image-size: 100%? I want to image to cover the entire viewing area horizontally, but doing so cuts of some off the image at the bottom. I want users to be able to see the rest of the image if they scroll down.
If you set to body tag a background image it will be shown in full height of page. Page height will depend on how many content on page.
From what I can tell, the answer is no. Instead, I wrapped the image in an img tag. Once it became content, scrolling worked as desired. Unfortunately it mean adding a z-index css property to the other content to get it to appear over the image.
Here's a snippet:
body {
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
margin-bottom: 0;
}
#image {
width: 100%;
margin: 0;
}
#content {
z-index: 100;
}
I have a setup for a left navigation bar on our website that. The way it is displayed is to have a header image (usually the client's name) at the top of the nav, then to have a table that holds a number of options about what to do. These options vary depending on what the client is. When displaying this nav, there are two images that run down the sides of the primary table, used as borders. These are skinnable images that are one by one pixel images. This way, each client's skin can be a different color while referencing the same image name in the CSS file.
Before we added doc types to these pages, the images were extending to the bottom of the page or the bottom of the content inside of the table, whichever was longer. Now, adding doc types to make the page standard, I cannot get it to do the same thing.
My setup is that I have one DIV as the header which simply holds the header image. Then, I have a DIV as a container with three DIV elements as children. The first and last ones hold the one pixel image as the left and right border and the middle div holds the content table.
I can't set the border image DIVs to 100% height, because the page size will be 100% + the size of the header image. And I can't just rely on the image going to the bottom of the content, because it needs to be the entire length of the page if the content doesn't take up the entire page. I'm at a loss of what to do here, short of using javascript to calculate what the size of the DIVs should be when I resize the page.
By the way, I'm trying to shoot for all browsers, so both IE (at least 9) and Chrome are m test cases. Linking code here to show what my problem is. As you can see, the left, content, and right divs extend past the bottom of the page, which I do not want to happen.
//HTML
<html>
<body>
<div class="NavHeader"> </div>
<div id="NavBody">
<div id="NavLeft"> </div>
<div id="NavContent"> <br> </div>
<div id="NavRight"> </div>
</div>
</body>
</html>
// CSS
html, body {
height: 100%;
}
.NavHeader {
height: 40px;
width: 100%;
background-color: blue;
}
#NavBody {
height: 100%;
}
#NavLeft {
height: 100%;
float: left;
background-color: black;
width: 1px;
}
#NavContent {
height: 100%;
float: left;
background-color: green;
}
#NavRight {
height: 100%;
float: right;
background-color: black;
width: 1px;
}
I've run into a similar case in the past and all I was able to come up with was using javascript...
CSS (as far as I know) doesn't really have that dynamic capability that you are looking for.
I have used a background image on the webpage and used this code in the css which makes it nicely resize when browser is resized.
body{
background: url("images/back.jpg") no-repeat ;
background-size: cover;
}
I need to place some other image on top of the background image at a specific place ( vase on table) .but when i do that then the background gets resized but the vase image remains in the same place and same size when browser is resized as shown in second picture below.
see the vase in these two images
browser in full size
resized browser
how can i make the vase image also get resized just like the background
I recently ran into exactly the same issue creating a hidden object game which needed images placed on top of a background image to maintain their position regardless of browser dimensions.
Here's what I did:
You can include a template version of the background image as an actual <img> with visibility:hidden (so it's not visible but still takes up it's space in the DOM and base the size (and background image size) based on that.
HTML:
<div class="image-container">
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" class="img-template">
<div class="item"></div>
</div>
CSS:
/* This is your container with the background image */
.image-container {
background:url('http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png') no-repeat;
background-size:100%;
overflow-x: hidden;
position:relative;
}
/* This is the template that resizes the DIV based on background image size */
img.img-template {
visibility: hidden;
width:100%;
height:auto;
}
/* This is the item you want to place (plant pot) */
.item {
position: absolute;
left: 14.6%;
bottom: 80.3%;
width: 15%;
height: 15%;
background: yellow;
border: 2px solid black;
}
Here is a working example: http://jsfiddle.net/cfjbF/3/
Try making the image relative position and setting the alignment manually.
http://jsfiddle.net/cfjbF/1/
<head>
<style>
body {
background: #000000;
}
#image1 {
background: #008000;
position: relative;
left: 50px;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div id="image1"></div>
</body>
Solution for your Problem:
https://stackoverflow.com/a/7660978/1256403
OR
http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/