Okay I found this tutorial "Stretchy Image Header Banner with CSS" but the problem (as it listed in this tutorial is) is the height. The height gets real big as the browser is enlarge. Is there a way to resolve this? Since the banner would expand in proportion, the height will have to get bigger but I wonder if there is a better way to do this. Is there a way to start cropping the banner from the top by certain percentages as the banner is getting bigger? Any suggestion is much appreciated.
Set a max-height on the image to prevent it from getting to large vertically.
http://jsfiddle.net/8C9ms/
Related
http://1aproductions.ots-internet3.net
So my wordless theme has a built in slider. It is responsive. The slider is in the background and seems to have a height of 100%. On browsers that are normal width but tall this means that a lot of the image is hidden behind the white background of the content lower down the page. If you resize the page while the slider is on the slide image of the queen you will see why this is a problem. My boss would like it to always show her heard and shoulders.
Is there a way of, on longer shaped browser windows, stopping the image from being 100% height and therefore making it display better on longer height browsers as well as normal shaped ones?
As you can probably tell I'm kind of out of my depth on this one, so any help would be fantastic!
Thanks
Luckily for you there is a quick fix on this particular slider. The elements are set to have a background-attachment of fixed on #slider-container .full-bg-image. Clear it and the whole picture will display. You should then be able to use the background-position to align more specifically for mobile, or only have the fixed position for desktop use with a media query. I'm not sure what method the powers that be would like best :)
URL to my website is http://chris-schilling-jksc.squarespace.com/
Password to get into site is fsj
I am using a Squarespace template which is causing me problems in making my main header image larger. Currently it is fairly zoomed in cutting off a lot of the picture. I am looking for some css to fix this problem. Squarespace templates are responsive making it hard to customize certain aspects. If someone knew a fix to my problem it would be greatly appreciated.
The reason the image is 'zoomed in' is because the background-size is set to cover. As the screen gets wider, the image must be stretched both horizontally and vertically to maintain the correct aspect ratio. The only real fix here would be to use a more narrow image, although it will then be 'zoomed in' at some aspect ratios on smaller screens.
If you view this site and reduce the size of your browser window, the top two primary blocks (image carousel and "Latest News") will overlap: http://africanstudies.stanford.edu/
I have tried a number of methods to fix this, but I can't come up with anything that doesn't overlap and look awful. (I also had to add some width/height settings to the carousel because I think there may be a bug with jCarousel where the entire image is not displayed if you don't specify the height for example.)
What I'd really like to happen is both the blocks scale down as the browser scales, but I'm afraid that's beyond my current capabilities.
Anyone have any thoughts on how to handle this? I can post HTML/CSS, but it's pretty ugly.
You've set the height on #views_slideshow_singleframe_main_home_banner_cycle-block_1 to 270px, if you remove that then it seems to be fine. Btw, you have essentially the same issue in the horizontal direction, i.e. at a certain width the slide show overlaps the Latest News.
I'm trying to make a very simple fullscreen css slider.
http://jsfiddle.net/Sy4hz/
This is normally how I'd do a really simple one, I don't think I'll ever have more then five things I want on it. I'm having a difficult time figuring out how to make it fullscreen. With a fixed width you can just tell it the photo size adn say move that many pixels over, I was thinking about doing it with percents, and just having the containing div be 100% height adn if it's 4 images slide it by percents, 25,75, 100 %. The problem is if an image is wider then it is tall it would go off screen with this idea.
Does anyone have any ideas on how to do this?
Thanks in advance.
Try Supersized ;) It's great, and very customisable.
I have looked at many different peoples answers to this problem but they only account for one image.
I am having a problem with the the two images that i have placed in my header, when i resize my browser i want them to scale down with it so that they dont displace my whole site.
i have it hosted in dropbox so you can see what my problem is: https://dl.dropbox.com/u/13722201/Dorset%20Designs/home.html
also another problem im having is un attaching the footer from the bottom of the screen and putting it below the body so users have to scroll down.
p.s I attached the footer to the bottom many months ago and I forgot how to undo it.
SORRY FOR THE TERRIBLY MESSY CODE
thanks in advance
Arran, 16
Here's how I'd do it. First, style each image using CSS to have width:100% and height:auto. This makes them respond to the sizes of their containers. Lose those width and height attributes from the img tag - I'm not even sure if those are valid anymore.
Now here's where the clever part comes. Your images are 550px and 298px wide, which is roughly a 65%:35% ratio. When the header is at its most narrow point before breaking, it's about as wide as the sum of the two. So give the big image's container max-width:65%, and the small image's container div max-width:35%.
This way, when the browser window is smaller, the images scale down correspondingly - and don't become larger than they need to be when the window is wide. I tried it out on your page, and I think it worked - see if it works for you. :)