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/
Related
I currently have a DIV containing my fixed navigation bar in hopes to have a background image spanning across the screen behind the nav bar while the screen scrolls. However, the background isn't showing up. I tried this tip, but it didn't seem to work.
Here's my site:
http://www.whiterabbitstudio.us/
and this is the background thati's supposed to line up behind the navigation ribbon:
http://www.whiterabbitstudio.us/1images/head_bkg.png
Does anyone have any ideas? Thanks!!
It's hard to tell what you're actually trying to do, but at the moment you specified the head_bkg.png to be the background image of the <div class="header">...</div> element which has a height of 0px, thus not showing any background.
To show the background properly, I'd say you should add it to the navigation div and rework the layout of that part quite some bit, e.g. no negative margin-left, make the width 100%, center the content and add a background-size: 100%;
Besides, if you want to have the background continuous, you need to crop the image to avoid the transparent parts above and below.
Many coders embrace sprites but they seem to forget that sprites require more-less fixed containers. You cannot use srite on h2 if you cannot control it's height. H2 looks good when you have 1 (2) rows of text, but hell breaks loose when you have 3 rows -- next image from the sprite becomes visible.
Whats the best solution to fix it? Icon inside it's container?
<h2>
<span class="ico">Text that needs to be hidden</span>
Lorem ipsum<br />dolor sit<br />amet
</h2>
Another solution is to place images on sprite file diagonally, but this solution doesn't allow 100% 0 positioning.
What's your solution?
Note the positioning of the red section in the images below
If neither the width nor the height is variable, place the image
anywhere in the sprite.
If the height is variable but the width is fixed, you can try placing the background along the left or right edge of the sprite. This will allow you to repeat-y.
If the width is variable but the height is fixed, you can try placing the background along the top or bottom edge of the sprite. This will allow you to repeat-x.
If both the width and height are variable, I don't believe you can use an image in the sprite effectively. You should just use a standard background image.
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 .
I want to build a fixed width website which is 960px wide and aligned to the left. However, I want to use a background which is wider than 960px and that fills the space to the right if the user has a screen wider than 960px.
This is easy using a background image:
body {background:url(myreallywidebgimage.png) 0 0 no-repeat}
#wrapper {width:960px;}
But can I do it where the background is an SVG, without a horizontal scroll bar appearing?
The only thing I can think of that would turn off the horizontal scrollbar is to do something like as follows:
#wrapper {width:960px; overflow-x:hidden}
Edit: Upon further reflection I decided it was best to see if Google offered up an other possible suggestions and I came across this: http://helephant.com/2009/08/svg-images-as-css-backgrounds/. The above solution will only work if you assign the background to that div element. You can, however try assigning overflow-x:hidden to the body itself to see if that solves the problem as well. Hopefully these suggestions help.
The background will scroll only if your SVG image has pixel dimensions which exceeds that of the browser window. If you set the image to have 100% width and 100% height, the background should not scroll.
Take a look at this web site. They're essentially doing what you want. They have an SVG gradient as the background. As you resize the browser, the gradient adjusts to fill the entire window.
http://emacsformacosx.com/
They also have a lot of other SVG on the page, but the background gradient is all you need.
I am trying to display a cropped center area of an image and have it work for different size images.
I had success setting a fixed width for the div containing the image and using overflow:hidden property, this works the way I'd like it to except this only shows the leftmost part of the image and the right side is hidden.
What I'd like is to display the center part of the image and have the left and right sides of the image hidden.
I'd go with the approach of making it a background image
.imghider {width:100px; background-image:url(./qed.jpg); background-position:center center;background-repeat:no-repeat;}
<div class="imghider"> </div>
As for different sizes you could use several classes or CSS expressions (or server side css generation)
I hope this helps.