Got a question specifically about the background image on a simple site I'm building.
http://polyamsterdam.nl/
The background image in question is behaving like it should (or at least as I want it to) on my laptop. It sticks to the bottom right corner of the screen.
On mobile (tested it on iPhone so far) the image also sticks to the bottom right corner but if there's more content then fits the screen the background image is pushed to the bottom of the page (instead of just the bottom of the screen).
Haven't been able to find a solution in the archive so I hope someone is able to help.
Thanks, Peter
I only tested in browserstack but adding this fixed the problem in Chrome for Android:
body, html {
height: 100%;
}
Edit:
I misunderstood the question. The best way I can think to fix this is to apply the background to an element that has the dimensions of the screen and has position: fixed set to it. The way backgrounds work, you will always get the image pushed to the bottom. Don't forget to set the z-index correctly (to -1 for instance) to make it stick to the back of the page.
So, in your HTML:
<body>
<div id="heartbackground"></div>
<!-- the rest of your HTML... after this -->
</body>
Then in your CSS
#heartbackground {
position: fixed;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
}
Related
I added code to my css so my background would stop stretching, when content is on the page. However now my content is being cut off, and I think its because the footer is not staying at the bottom of the page. Its visible if the page loads a little slow, but once the content loads you can't see the footer anymore. Nor can you scroll down without changing the height. I've tried plugins, and additional code suggested on other post. None have helped. Is there a way I can keep my footer at the bottom, while keeping the code that keeps my background from stretching? edit I'm sorry left out the code that used to stop the stretching. It can be seen below. Also, an example of what is happening can be seen here.
#primary
{
position: absolute;
left: 0;
height: 100%;
background-size: cover;
background-attachment: fixed;
}
This is a screenshot of the original issue.. My content (the player) can be seen completely, but the background is stretched. By adding position: absolute;I got the background to load correctly, but now the content is cut off. A screenshot of results can be seen here for my mobile device, and Here for my desktop. As you can see, the player cuts off on mobile, and both don't show the footer. At first I thought the footer was loading. After changing the value of top, I can see the footer which seems to be behind the content. I changed it to top: 370, and I got this for on my mobile, and this on my desktop.. The social icons in the footer is there, but its loading behind the content, and in the middle of the page. It appears that is why my content is being cut off.
I'm not sure I entirely understand your question... but I think the issue with your CSS is the height: 100%;. Adding 100% height makes it 100% height of the screen - and because it doesn't start at the top of the page it extends down below the bottom of the visible area. If you add the CSS top: 0; then you'll see what I mean - it no longer goes below the bottom of the screen, however it now overlaps the header. To get around this, you can change the CSS to:
position: absolute;
left: 0;
height: calc(100% - 54px); /*Minus the height of the header*/
top: 54px; /*The height of the header*/
background-size: cover;
background-attachment: fixed;
I hope this helps, if not please explain the issue in more detail and I'll see if I can help!
After a few days of troubleshooting and searching the web, I found a solution for my problem. I added code to put the footer at the bottom of the page. The code left the footer stickied, instead of at the bottom of all the content. It also didn't change the cutting off of my content. So I knew it wasn't the footer.
The way I wanted the footer to be at the bottom of the content. So a fixed footer isn't what I needed, but I found out a pushing footer would do the trick. Apparently, when the its not a lot of content on the page, sometimes the footer will push up to where the content stops. So my next step was to find out exactly what was cutting the conter off.
It the container that was cutting off in the middle of the layout. #primary in the code the make background stop stretching was the wrong selector, so I changed it to body. I also added a code to make the height and width of the container 100%. Then BOOM it worked. Below is all the additional css I used to fixed the problem. Thank you to everybody who helped me.
body {
width:100%;
height:100%;}
body {
position: absolute;
background-size: cover;
background-attachment: fixed;}
I'm creating a new website for myself, and as a photographer/videographer, image content is the first thing I want people to see on my page.
Here is my code so far.
HTML:
<div id="slideshow_background">
<img src="IMAGEADDRESS.JPG" class="slideshow" align="middle"/>
</div>
CSS:
#slideshow_background {
width: 100%;
left: 50%;
margin-left: -50%;
overflow: hidden;
text-align: centre;
z-index: -1;
position: absolute;
margin-top: -100px;
margin-left: -50%;
max-height: 700px;
}
img.slideshow {
width: 100%;
min-width: 700px;
display: block;
text-align: center;
vertical-align: bottom;
}
What I am trying to achieve with this, is what is done here: http://www.atcofficial.com.
As you can see, the image stays centred whatever the window width is. It also scales up/down depending on how zoomed in or out you are. This site is made with Squarespace, so I'm imagining it's some form of fancy javascript/jquery or something along those lines.
With CSS, I am able to get the image to either stay centred, OR to scale up and down, but not both at the same time. That's what I'm trying to achieve here. Is there away to combine the two so that this is possible?
Try using CSS background-size:cover;. Cover shrinks and expands to fit various window sizes, without distorting the image. If the screen size ratio is different than the image, than it will crop the edges depending on how you have it positioned (top, bottom, center, right, left, center). Keeping the image in proportion is the key feature of background-size:cover;. Because its a background and not an image, you can easily place elements on top of it.
Here is a JSFiddle Example you can play with. Expand and contract the window to see the background image adjust in size. The only code your are interested in is listed below. (The rest of the CSS in the example is for styling only, and to make the div display at 100% width and height).
background-image:url(http://i.imgur.com/OaE8VAj.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
Follow Up
Yes, there are CSS3 slideshow galleries. Here is one that looks attractive, and is responsive: https://github.com/css-slider/image-slider. Here is a tutorial on creating a CSS3 slideshow from Smashing Magazine: http://www.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/.
You probably already know the information below, but what you have to check into before investing much time in the technology (CSS3 or JavaScript), is how the gallery will display on older browsers and handheld devices, and is there an easy work-around for these devices.
One technique would be to place the gallery in a separate div that can be hidden for older browsers/devices. Then use the background-size:cover, or another technique, as a fallback. Also remember that IE10 and IE11 on a touch screen can be glitchy, and need testing as well. Without going to far beyond the scope of your original question, there are several good ways to detect devices/browsers including Modernizr, Matt Stow's Layout Engine, Categorizr.js and Internet Exlporer's Conditional Comments.
Side Note: The example website listed in the question displayed a large single image as background, and if there was a slideshow, it was not working on this end using the latest version of Firefox.
I am beginner in HTML/CSS and I come to one issue that is strange to me. Can't remember that I had this problem when started to learn. Nevertheless, the problem is that I can't scroll when I resize my browser window. Her is the code:
<!DOCTYPE html>
<html>
<head>
<body>
<img id="pic" src="http://0.tqn.com/f/lg/a154.png"/>
<style>
#pic {
position: fixed;
left: 1060px;
top: 150px;
right: 300px;
bottom: 658px;
}
</style>
</body>
</head>
</html>
I put position of picture on left and right because that is the only way that I know to fix image on one specific position. I tried auto, but the picture moves when I resize browser.
Thank you for your time and effort
Ok, the issue I think you have is that when you position an element absolute, it removes it from the flow of the document.
So think of it as if the absolute element is removed from the body of the page.
The body of a page is always 100% width of the browser. Your image is being positioned outside of the browsers view port.
you have two options. either do not user absolute positioning and use a css layout to get it the image in the proper place.
or you can set the width of the browser to the width that you need it to be e.g. 1200px
the first option is better for modern days and doing more future facing sites.
I couldn't think of the right wording for this question, but here is my problem:
When users hit Ctrl+Plus to zoom in on my page, content seems to push each other around.
For example, I have a navigation div floating on its own on the top left corner of the page.
Then there is main content text that is centered in the page. When the user zooms in, the centered content quickly moves left towards the navigation and eventually starts wrapping around it and it looks awful.
Is there a high-level way that you can describe to me how to structure my page so that zooming keeps things stable and 'just zooms in' without distorting the original positioning?
This link from "A List Apart" covers some font sizing and fluid web development. It should give you some good direction of how to structure your page to adapt to changes in font sizes. You may also want to look into media queries because they allow you to apply styles based on certain characteristics of the browser or device.
How to keep code in center on zooming?
Center the code on zooming?
ANSWER:
< div id="wrapper"> Place this div tag outside the code < /div>
#wrapper
{
background-color: #F00;
width: 400px;//This width can be anything according to your need
margin-right: auto;//Note margin-right and left are allocated automatically
margin-left: auto;
}
Another Way
#wrapper
{
background-color: #F00;
width: 400px;
position:relative;
}
yes another problem with this scroll bar
alright so I started the website over again that was mentioned here
and I am having problems with this scroll bar again
alright so all I have is a single image in a div tag
<div align="center" id="SuggestionBox">
<img src="images/SuggestionBox.jpg"/>
</div>
this code displays right but
when I make the browser window small enough that the full image can not be seen it doesn't give me a scroll bar to see the whole image
hopefully this makes sense
I am using firefox
EDIT:
I tried overflow:scroll and it did not work
this was the outcome
and this happened in the middle of the page
I also tried 'overflow:scroll' on the body of the page through css and all it did was show disabled scroll bars that did not change no matter the size of the browser
also some people are a bit confused
so
this picture might help
notice how the image is not fully shown
well, I want there to be scroll bars in case the user wants to see the whole image
but they're not appearing
also here is all my css code:
body
{
background-image:url("images/background.jpg");
}
a:hover
{
color:#FF0000;
}
table
{
background-color:#FFFFFF;
}
#SuggestionBox
{
position:relative;
right:375px;
}
thanks
Good Luck
get it?
I may not be understanding your question, but it looks like your problem is that you've disabled scrolling in the body but would like the div to scroll. #lukiffer's answer is right. When you resize your browser, however, the scrolling div, which is a fixed size, isn't overflowing because its content still fits.
Are you wanting your "SuggestionBox" div to anchor to the page so that it resizes along with the page? That would enable it to change sizes as the browser does and thus add scroll bars when its content doesn't fit:
#SuggestionBox
{
position: absolute;
/* Change these to establish where to place the div. All zeroes
means it fills its whole container */
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: scroll;
}
Update:
I don't get what #SuggestionBox is supposed to be. If you're just wanting a centered image link, you could get rid of the div and just have this as your markup:
<a id="SuggestionBox"></a>
And for that <a/>, you could have the following CSS:
#SuggestionBox {
display: block;
width: 100px; /* Or whatever the width is */
height: 100px; /* Or whatever the height is */
background-image: url(images/SuggestionBox.jpg);
margin: 0 auto;
}
If your reason for having the div was to give your link a right margin of 375px, your CSS could have the margin set to 0 375px 0 auto instead.
If you use this simple HTML/CSS, your body should be able to scroll normally (unless you have other CSS or HTML that you haven't posted that's breaking it).
div#SuggestionBox { overflow:scroll; }