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;
}
Related
I am trying to make some responsive cards. I have the cards completed and spaced out properly. On the front of the cards I want an image on the top of the cards and a title in the middle. The title is fine and the image is fine except for the right side of the image.
Here is the CSS code for the image (image is in an img tag in HTML page with a class of "image"):
div .image {
padding: 5%;
height: 45%;
width: 100%;
}
The right side for some reason is ignoring the padding and sticking out of the card parent div. Any ideas why?
did you already set div's width?
also as far i know is no need to set image's height if you already set it's width to 100%
anyway here some example
div { width: 200px; height: 150px; padding: 6px; }
div img { width: 100%; }
You set the width to be 100% and padding 5%. Make sure you have:
box-sizing: border-box;
for the parent.
Also without the full example of code, hard to answer. Can use overflow: hidden; on the parent to hide that part sticking out.
I am trying to implement a grid onto this page. Because the Wordpress page uses overflow:hidden to the layout it will need to remain as is.
Out of curiosity, I tried
.content-container, .content {
overflow:visible
To see if it will reveal the entire grid that was cut off and it did, but also revealed what I am trying to hide through the layout, a spare bit of page.
Is there any way that I can reveal the whole grid without having to allow the overflow?
It cuts off the sides because .container's width is set to a fixed value of 1170px. If you set .container's width to 100% all content will be stretched.
.page-id-2099 .container {
width: 100%;
padding-right: 0px;
padding-left: 0px;
}
This will work:
.page-id-2099 .content-container, .page-id-2099 .content
{
overflow: visible !important;
}
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 am developing a webpage for images on a carousel. How can I move an image down in a DIV, or even center it vertically?
Here is my CSS code:
.carousel .item {
height: 900px;
background-color: #777;
}
.carousel-inner > .item > img {
display: block;
margin-left: auto;
margin-right: auto
}
Here is a URL to the webpage in question to show you that the image is too high: http://www.canninginc.co.nz/canluciddream/screenshots.html
EDIT
Ok, I have edited the code by changing the:
margin-top: 50px;
I am still after the image to be lower in the div. I can increase the top margin, but this leaves a white background. What would be the best way to move the image a little bit lower?
First of all make the .item position relative and then
on css:
.carousel-inner > .item > img {
position:absolute;
top:25%;
left:25%;
}
This will center the image vertically
Give margin top of 130px to the image and it looks cool!
margin-top: 130px;
Put image inside the main body, set the main body to position: relative, then set the image to position: absolute; top: 0; left: 0;
If you can't put the image inside the main body, then add a negative margin-top to the main body.
Your problem is not the image being placed too high - it is fixed header. So set margin-top:50px instead of -80px for .myCarousel.
The reason the image is going behind the navigation bar at the top is because you have the navigation bar's position set to fixed. This removes it from the rest of the page for styling purposes, in that the other divs/elements do not recognize it when they position themselves. If you remove the position: fixed; css on that item, the other elements will position relative to that one. Another option would be to add enough of a top margin to the image element to push it down below the top bar by default, whichever you prefer.
I have a sticky footer that is working fine on a music site, however, when I click on the genre with the most albums it doesn't make the page longer and they overlap. This makes the links unreadable as parts of the image in the footer are behind them.
This is my code for the sticky footer
html, body
{
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -80px;
}
#footer, .push
{
height: 60px;
}
Because ASP.NET inserts the main content into a form tag, you have to set the form height to 100%.
Change your CSS to the following should fix the problem:
html, body, form
{
height: 100%;
}
EDIT
In wrapper, you specify a negative space of 80px, and in the footer you specify a height of 60px. These should be the same values unless you have child elements not shown that are expanding the footer height. Try making those values the same (either both 80 or both 60, whichever fits the footer better).