On my site, I'm having issues with the repeating-linear-gradientelement in CSS. For the majority of the page, the background looks ok. But suddenly, when I scroll down, it looks as if the gradient just shifts one bar to the right and makes my page look ugly. This is what I currently have as CSS:
background:repeating-linear-gradient(45deg,transparent,transparent 50px,rgba(255,255,255,.1) 50px,rgba(255,255,255,.1)100px), #81D4FA;
I'm really having trouble, and it would be great if someone could help me. Thanks.
As was mentioned in the comments, background-attachment: fixed; will prevent the seam from being visible, but the stripes do not scroll with the page.
According to MDN:
A repeating CSS linear gradient is not a CSS <color> but an image with
no intrinsic dimensions; that is, it has no natural or preferred size,
nor ratio. Its concrete size will match the one of the element it
applies to.
This means that the positioning of the edge of the image depends on the size of the element, and a 45deg line will not line up with its neighbors unless one of the dimensions is a multiple of the other. I recommend making a tile-able image in your image editor of choice and loading it as an asset rather than using repeating-linear-gradient() if you don't want the background to be fixed in place.
Related
If you view this HTML css site in either 1024x768 resolution or on a mobile device, the content that extends vertically beyond the browser is hidden and there is no vert scrollbar to do so. Is there any way to force it?
www.marketbridge.net
thx
On Apple OS, scroll bars are never shown anymore. I often find this a nuisance also, but I guess MacOS/iOS users are used to this. You could make some flyover indication with JavaScript using scroll height and scrollposition, but I guess you're better consistently using a pagefooter. This way the user 'feels' there is still content.
Another way to achieve this is only the upper half of the last displayed line of text is displayed (through JavaScript). The same effect is reached by displaying a rectangle with increasing opacity (0 to 100%) over the bottom of the viewport that makes the bottom of the viewport seem to fade out. If you make sure the page's bottom padding is equal or greater than the gradient, you have a nice indication of continuation, and the good thing is you can do with pure HTML and css.
http://jsfiddle.net/LFtHg/
I'm trying to create my first responsive website. For this, I'm including an image. This image has a caption which should be displayed in a transparent overlay. However because opacity settings are passed to child elements, I have removed the text from the container.
I cant get the overlay to display, at all (because it has no content inside it). I cant really add a fixed height as I want to image to respond to changes in browser size. How can I ensure this is displayed?
Thank you,
J
Edit, also what would the best way to scale the overlay as the browser resizes. I'm unsure if this approach is even possible.
First of all, you can use an RGBA background ( background: rgba(0,0,0,.5); ) instead of using opacity.
Secondly, you need explicitly set a width for your span.figcaption (you can also do that by specifying both left and right offset properties)
Perhaps this demo http://dabblet.com/gist/2778608 might also help you (image can be of any size - resize the browser window to see how everything resizes).
Adding the following rules to your existing sample effectively stretches the .figcaption elements to fully cover the .figure, fiddle:
.figure {position:relative;}
/*these could be different so that the overlay appears larger than the caption*/
span.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}
p.figcaption {position:absolute;top:0;right:0;bottom:0;left:0;}
You can arbitrarily adjust the values to a % setting so that the caption appears centered etc.
BTW, you know that your implementation is not yet liquid, right?
I've already had a look through some posts and couldn't find what I was after. I'm designing something in PS at the moment and I can foresee an issue when it comes to coding the design into html+css.
Imagine my centre div, it's 960px. It's going to have a semi-transparent .png as a background. The design is “full width” so this div will be contained in a larger div, set to 100% width. This is all ok until I get to the background on this outer div. It's also going to have a .png running the full width of the page. Problem is: I don't want it running through the middle, as it will result in the middle have a double thickness to it, if that makes sense?!
Basically, I need a way to either run a div either side that is elastic, or someway of stopping the background from running across the centre 960px portion of the browser window.
I have NO idea how this can be achieved, apart from using JS to set widths, which I don’t really want to do.
Any ideas?
Ok, I’ve tried to get the basic issue here: http://jsfiddle.net/8Bznc/1/
You can just put a non-transparent background on the center div, so the other background doesn't show through.
See here: http://jsfiddle.net/9bnHD/
Apply the background-image only to the wrapping div.
Alternatively, if the center and sides need to have different images, give the center div a non-transparent background-color as well.
Also, you could fake it by using multiple background-images. Demo
Keep in mind this won't work in old versions of IE, but something as non-essential as background transparency can be excepted as graceful degradation.
What is the optimal way to slice up this background image for optimal CSS implementation? The designer knows no CSS and since we're not CSS experts, we're not sure of the best way to slice up the background image. The background, of course, should be fluid and scale to different monitor sizes and page lengths. At the same time, it seems sub-optimal to have one large image or multiple small images.
We don't need to support IE6.
Any advice?
By slicing, I'm not 100% sure what you want exactly. I assume you are looking for a way to stretch the Facebook part as much as needed, while still keeping the background image decent.
For most non-phone (ie desktop or tablet) screens, you could cut below the last cloud and have a repeat vertically of the blue sky background. With the CSS property background-repeat: http://www.w3schools.com/cssref/pr_background-repeat.asp
You'd have 3 divs with margin: 0:
the hmm panabee (actual content) div, background image is the balloons, centered. You expect its height to be greater than your image's height. If you want to enforce it, there's min-height. Bottom of this image should be blue sky.
the facebook div, can be as big as you want if you use the background-repeat with the blue sky image.
and the footer div, with a background image of your choice, but the top of the image should be blue sky.
I think all this (except min-height, maybe?) should work on most browsers, even IE6.
CSS3 supports multiple overlapping background images (you'd want them to be transparent PNGs or similar), as well as the background-size property allowing you to adapt to different window sizes. It seems to me this would solve your problem exactly.
Check here to see if a feature is widely-supported enough for your target audience.
I see many sites that suffer from this, and I've only been recently been immersed in backgrounds that stretch 100%...
Examples are
http://brassblogs.com/blog/sticky-footer
http://beanstalkapp.com/
if you constrain the width of the browser and scroll right, it looks visually off: the background doesn't carry over. How could you go about fixing this?
Edit: heh, as soon as I figured out the answer myself, I got the answer.... haha.
Your problem happens because the browser doesn't know when to stop scaling the webpage when you resize the window. You'll have to specify the smallest width that your design can tolerate:
html
{
min-width: 1050px;
}
The min-width is kind of large, but if you make it much smaller, your background will bleed through and cause layout issues.
Also, you'll have some issues with layout if you use percentages along with borders, margins, and padding (which is partially why your background images aren't sticking properly).