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.
Related
This is an example of the effect I'm trying to acheive only without using images.
I want to create these screens that take up the entire screen like in the example. But instead of using background images to keep the content position, I'd like to use any HTML content within these screens. I'd also like to eventually ad a parallax effect similar to this.
So let's break it down. I got these background images on these screen elements. The background is fixed so it stays in the same position when you scroll. When you scroll down, the element moves out of view and another comes into view. It gives this effect as though the scrolling is causing a cover to slide up and reveal another screen. I want to keep this effect only without using background images. So I'll need some way to have some content remain fixed and have a contain hide it when it overflows an element that isn't fixed. But, as far as I know, there's no way to do this with CSS alone, am I wrong?
Like I said above, it would be interesting to have the content not remain exactly fixed, but instead slightly move it as you scroll giving it a slightly parallax effect. In order to do that tho, I'll need to use JavaScript. But, that's a bit out of the scope of my question, but I'd like to keep this in mind when coming up with the solution.
Thanks for all help in advance!
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?
Hi I was trying to figure out how to create a border that fades into the background colour of a div and this is the only solution I could come up with.
I've googled around and it seems people suggest CSS3 but I was told it was still "under development" and not fully introduced in modern browsers, correct me if I'm wrong, probably am.
Anyway this is the solution I came up with, are there simpler ways of doing it or is this a reasonable approach?
Created numerous divs for each part of the border (as below), and set their background image according to the part of the border: http://i.imgur.com/sh6Z8.png
HTML & CSS: http://codeviewer.org/view/code:1e4f
(New to webdevelopment and stack overflow, sorry if I'm doing anything unorthodox, thanks).
So as Tim there already said it, if the width of your website is static, you can do something like that ( In fact even if css3 may be good option for your usage case This is super simple... )
http://jsfiddle.net/Xtw84/3/ - this is from a prior answer so the edges are not soft but the idea is the same. ( doesnt matter ) I also added image in the background so you can see how that would work. Theres no need.. actually makes no sense to slice the background image in half.
Heres a bit more stripped down version of it. http://jsfiddle.net/Xtw84/4/
With css3 i would do this with box-shadow and just expand the shadow as much as needed.
Is your layout going to be fluid? e.g. it will grow in width/height? If it isnt going to grow in width, then there is no reason that you can not just set the background image.
For what you are doing, I wouldn't use gradient borders and just stick with the images in the background.
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 want something that looks like this http://jsfiddle.net/mazlix/VBzau/3/
But I don't want to have to write the border-radius twice (in the div.left in the CSS). I mean, I can, but I just feel like it's wasteful and a sign that I've structured this wrong.
Please let me know if that seems the only way to properly achieve what I want.
Thanks!
border-radius:15px 0 0 15px;
See here:
http://www.css3.info/preview/rounded-border/
I'm about 98% sure that you can't get around that.
1.
So.. I dont know if it's an option, but you could use background image in the outer container. This background would be the desired width and 1px height and hold 2 desired colors side by side. And it would be repeated vertically.
2.
This however is a css3 option: You could use horizontal gradient. Basically the same as the option above, just maybe a tad more flexible as it doesnt use image but css3 gradient as mentioned. http://jsfiddle.net/VBzau/13/
The gradient was made using http://www.colorzilla.com/gradient-editor/
3.
Then theres the good old masking. To basically use an image or images that are negatives of border radius and are the same color as the background where the box is placed.
Much like what is being used here as a fallback in the main content area with the sliding content http://www.apple.com/imac/
4.
I got thinking about how you mentioned about the structure. So heres what i would recommend. http://jsfiddle.net/VBzau/14/
Basically i have put another container wrapping around the main container. Re-applied overflow: hidden; and taken away the radiuses from the left box. Also i moved the image inside the new outer-container.