OK I'm using SuperSleight to fix the background transparencies on the png images in ie6. It all works as it should except it is scaling my background image to 100% height.
I have the following set to 100% because I want my footer to stay at the bottom. It seems like this is affecting SuperSleight and is causing my background image to scale. For most people simply changing the background image format would work but Ive worked a fair amount trying to remove gradient rings and using a png came out with the best result. Does anyone know a fix for this?
body, html {
height: 100%;
min-height:100%;
}
body{
background-image:url(../images/content_bg6.png);
background-color:#3e2f24;
background-repeat:repeat-x;
}
I worked around the problem by creating a div wrapper for all the content within the body tag initialized supersleight to that specific wrapper and its children avoiding the body tag.
$(document).ready(function(){
$('#pageWrapper').supersleight();
});
The above is a work around.
Related
Pagespeed module updates this image to resize it but in the process it messes up the scale. Is there a way to keep the scale and resize it? (Similar to cropping the image)
The CSS on the image is:
height: 100%;
width: 768px;
object-fit: cover;
To report the rendered dimensions back to the server, this filter
injects JavaScript code to your pages which beacon the sizes back.
Any image that you have that uses object-fit: cover; is going to be extremely confusing to Pagespeed. After all, the visible part of the image changes depending on the size of the screen, so it isn't even really possible for Pagespeed's beacon to accurately measure and correctly guess how to crop and resize it.
Does disabling the filters solve your problem?
https://www.modpagespeed.com/doc/reference-image-optimize#resize_rendered_image_dimensions
ModPagespeedDisableFilters insert_image_dimensions
ModPagespeedDisableFilters resize_rendered_image_dimensions
Edit: You may also want to try replacing your < img/> with background-imaged CSS. It should work functionally identical, but I suspect Pagespeed will have a better time correctly interpreting it.
I'm having a hard time figuring out how to make my footer stick to the bottom of the screen, even when the page is smaller than the screen.
www.test-domain.sk
I'm guessing it's something to do with the container length, but I'm honestly completely unsure.
Any help would be appreciated. :)
This concept is something known as a sticky footer. The Mozilla Developer Network has a page here illustrating a few ways to accomplish it. In the example of your www.test-domain.sk page, I believe you can add the following css to make your footer stick to the bottom of the viewport (screen).
html {min-height:100%)
body {100vh}
div#page {min-height:100vh; display:grid; grid-template-rows: auto 1fr auto}
Assuming you are looking for something like this, but if not, be more specific. As in post the code you already have.
footer {
position: fixed;
bottom: 0;
}
I'm attempting to move from font icons (icomoon.io) to SVG sprites. Is it possible to use SVG sprites without needing < svg > markup for each icon instance?
What I really liked about the font icons was that I didn't have to clutter my HTML with any additional elements to get the icon to display. I usually just targeted a simple class on whatever element I wanted the icon to display and then used pseudo selectors to display the icon, e.g.:
<h1 class="news">News</h1>
h1.user:before {
font-family: 'icons';
content: '\news';
}
That made a lot of sense to me, and all of my icons were easily managed almost completely in CSS. I rarely had to touch my HTML as long as my markup contained appropriate classes.
I've since switched my build system to Grunt and thought I'd give SVG sprites a try. Almost every1 article2 I3 can4 find5 on the subject says you need to add an additional SVG element to your markup wherever you want each instance to display, e.g.:
<h1>
<svg class="icon">
<use xlink:href="#icon-news">
</svg>
News
</h1>
That seems like a step backwards to me, at least in the management of markup. To me, an icon is usually presentation that should be separate from document structure. Are we doing it this way simply because of the state of SVG support in browsers?
Ideally, I'd love to be able to do something like this:
<h1 class="news">News</h1>
h1.news:before {
display: inline-block;
width: px;
height: px;
background: url(icons.svg#news) no-repeat;
}
This post seems to be closer to what I'm looking for, but I'm not sure of browser support and how to do it automatically in a build system like Grunt.
SVGs can be loaded as files exactly the same way as other images using <img> tags or CSS background, and can be used as sprites exactly the same way too. The only difference is that you have to specify the size you want it (because it's scalable, so the browser doesn't automatically know how big it is like it does with PNGs).
Depending on how you want to use the image, loading them this way may or may not be suitable as some SVG features aren't available, but it can be done.
When the slide transitions, the background image displaces below the carousel before going back to the correct position. This happens on every slide every transition (when clicking or waiting). Here is a GIF showing what happens. http://gyazo.com/350334669db0e76f6d2b6e80fce0aed3
I have looked through some similar questions (all resolved). Only one seems it's the same issue, but the solution isn't applicable in my situation.
Here is the code. It is done mostly in jade with some html here and there. https://github.com/CastawayLabs/MCFreelancer/blob/master/views/index.jade
Your div was position:relative. Bootstrap uses position:absolute to perform the transition.
div.item(style='background: url(http://p1.pichost.me/640/25/1477731.jpg) no-repeat; background-size:cover; width: 900; height:400; position: relative;')
See patched commit
After a few days of hounding google for an answer, I am hoping some genius out there is able to help me on this tricky problem im having.
Overall what I am trying to achieve is a 1 page website with a very large bg image that uses jquery to scroll between each div ( which is effectively the same as a 'page', set to 100% height ).
My problem is..
I have a body background image, that is approx 5000px height.
I have 3 divs that I want each to be 100% height of the browser window.
Thus when scrolling from div to div the body bg is underneath.
I cannot set the BODY to 100% height as that will simply 'cut off' my bg image to the browser height.
I need to keep my bg image in its full length.
Is there any possible way to achieve this?? I read somewhere you can set an ID to your BODY element however Im not sure that would be effective for what im trying to achieve?
I know some one out there has an answer :)
Mush appreciated
I have seen you example code now, and I think i found the problem.
You forgot to make the html tag 100% in height, this results in your problem. Try to do like this:
html, body { height: 100%; }
I made a jsFiddle demostation here: http://jsfiddle.net/Allan/Vx9dC/