OK so my brain is just probably not working tonight. What I'm trying to accomplish is a two column layout where one column scrolls and the other is fixed. The fixed column has a very large background image in it that I would like to be able to scale to the size of the screen. Additionally the left (fixed) column's width would have to scale to accommodate the background image. The best way to really explain this is with a picture:
The highlighted area with the arrow in it will scroll and the other column with the picture and twitter status in it would remain fixed. My problem does not come into play with the fixed CSS positioning. My issue is with scaling my columns based on screen size so that the picture always remains in the proportion it's shown here both in it's own dimensions and those of the other column. That's what I'm stuck on. Any ideas? I really appreciate the help.
I think you can just use an image element in your first column and set it to take 100% of its parent. If the parent div is also a percentage then its size will change of course and that also scales the image within. If we want the image to scale, then we can't also specify a height.
<div id="parent" style="width: 40%">
<img id="child" style="width: 100%" src="http://i.stack.imgur.com/lvvrv.png" alt="Fake Background" />
</div>
Check your JS FIDDLE CODE HERE : http://jsfiddle.net/4P9fJ/7/
Since you din't mention you'd be changing the images in your background i provided the background image in the body tag .
Related
I would like to build a web page that looks somewhat like this:
http://i62.tinypic.com/2rm8inm.png
I want to have backgrounds in three layers:
A background with repeat-x (red)
A background with repeat-y, centered and stretching the whole height, fixed width (blue)
A background that does not repeat, fixed height and width (green)
I have tried many different approaches, but they either do not scale correctly, or they will not fill the whole height.
What is the best way to achieve this?
Thanks!
This could be a possible approach to the problem:
<div class="xrepeat">
<div class="staticbg">
</div>
</div>
And then give the body the background. Of course I picked random backgrounds where width and heights are messed up but you should get the idea:
Result:
http://jsfiddle.net/YTnv8/1/embedded/result/
Code:
http://jsfiddle.net/YTnv8/1/
Hello i have been working on this website for a while and i have been working on making it resizable when you adjust the window size (or resolution of screen) and when i finally got it to work now the links on the graphics are not clickable
http://javiermedinaloera.com/
Here is my website, all of the circles are coded to be links but only two of them work
Thank you very much, i would really appreciate your help
I know what your problem is: you have 100% width for all items in each line, but they have the same z-index, of course one will "cover" the others. The solution is change the width of them, give each of them a width let's say 250px, then adjust your "left" attribute. Probably you could see your site works in IE, because IE doesn't render your css the ORDINARY way.
Your div tags are not formatted with specific widths. Each div tag is taking up close to the whole width of the page. You need to give them specific widths. In the style tag at the top, add this CSS.
<style type="text/css">#arrieros{ width: 270px; }</style>
Just set the width to 270px for each div that you have and it should work fine.
I'm trying to scale text in a WinJS app so that the font size increases with the screen size. So far I use
<div style="height: 5vh;">
<div data-win-control="WinJS.UI.ViewBox">
<h1 data-win-bind="textContent:title"></h1>
</div>
</div>
This correctly scales up the size of the text on different resolutions but it also performs a translate on the text and moves it to the center of the containing div when I want it to stay left aligned. The h1 has position:absolute, but even explicitly setting that to left:0 doesn't work, it appears the translate always has a higher importance. Has anyone come across this before? The translate is applied directly to the h1 element in this instance, and there is no margin or padding on the parent elements as well as having text-align:left set
Thanks
Read here, I think this is what you want: http://www.maxdesign.com.au/articles/em/
"The browser scaling feature is achieved using some simple javascript that retrieves the width of the browser, divides that by the optimal line length"
there is probably a very simple answer to this very simple question, but i just can't to seem to find it, and its driving me crazy. what I have is a div element at the bottom right corner of the window with an image in it approx. 260 x 300 px.
my css code is this:
#doomdiamond{
position:absolute;
right:50px;
bottom:50px;
}
and html is this
<div id="doomdiamond">
<img src="doomdiamond.gif" />
</div>
all pretty simple. the element shows up with the image inside of it at the proper distance from the browser window. but what i really want it to do is scale/resize itself proportionally when the browser is resized, instead of staying the same size.
this is possible right?
I have created an example for you showing an image that sits in the lower-right corner, with the size based on the width of the window.
It works by setting the image width to a percent value. Percentages are based on the containing parent; because I did not cause the #doomdiamond div to be absolutely placed, it is not the positioned parent of the object.
Setting only the width or height of an img element causes the image to be proportionately scaled.
P.S. This uses no JavaScript :p
Yes it is possible, you will need some JavaScript to do it though. Are you using any JS frameworks ?
UPDATE
Looks like resize div and its content on browser window resize is what you're looking for
I have this website.
The div container contains a background with a grungy look, and the body contains another background that is repeated on the x coordinate.
If you view the site you'll see whitespace on the left and right side. I am wondering how I can set the background images to expand based on the screen resolution. Would it work to set a width based on percentage for each div?
To my knowledge, CSS does not support scaling background images, which is disappointing to say the least. Long story short, you'll probably have to fake it with a fixed-position, z-indexed img tag. That, or what you did: a large image with a background-repeat.
I dont see any issues with what you've got in FF3/IE6/IE7 and chrome. only issue i see is the transparent png in ie6 with the ugly gray behind it.
ie6 I gotta fix but what the customer wants is for the with of the page to size up based on the users computer resolution
Unfortunately, you can't scale the image itself.
What you could do would be remake the div structure so that the inner div contains the center of the grungy background and the sides were tiled through two separate divs. You could then recut the center piece to tile both vertically and horizontally and give it a width that is a percentage of the window size. You could keep it from getting too small via javascript.
This is not an optimal solution, but if the client is set on having it scale with the browser window, this might accomplish it for them.
thanks for all your answers, when i said white space i didnt mean actual white space what i was refering to was that the entire container div wasnt sizing (width wise) towards what the users computer resolution was. and since allot of the divs are set with a background image there is no css code for setting the width on the image but i guess it would work on the divs. but thankfully after talking with the customer he changed his mind and doesnt want it anymore :)