Here's my dilemma, I've got a background image that has a bar on it. I fit the background image by using
body {
background-image: url("foo");
background-size: 100%;
}
I also have some html that I want to be inside that bar. The problem is, when the user resizes the browser window, the image adjusts to fit it (which is what I want it to do) but the html stays in the same spot, so it gets put outside the bar. Is there a way I can make my html resizable like the image so that it appears that the html is glued to the image? Can somebody give me a css clip for this?
The biggest problem with using images to guide your layouts is exemplified by this issue. Unfortunately, Harrison, you there is no solution that will enable you to do what you want across browsers or browser sizes without changing the image. If you can, please post a screenshot of what it is supposed to look like so that we can help you modify your background to improve its compatibility
In the meantime, I suggest that you remove the bar from the image and continue to use the image as your background. Then use a div with display: block; and use the bar as its background.
If you want the bar to be resizable, set its height and width to percentage amounts of the container height and width. Of course, when the window is reduced in size to a large extent, the HTML would spill out, there's no remedy for that.
Related
I'm trying to get a similar background effect that's on this website:
By looking at it, the background of the website is black, but has a horizontally stretched background image that remains at the top of the page. When the page is scrolled down, the image stays at the top but blends into the background color.
I tried making an image like the one in the example and used background-size:cover but when I scroll down, the image stays static and just the contents scroll. If that makes any sense at all!!
By looking at the example, could somebody kindly explain what CSS is needed to achieve this? And also, what should the image size be (in PS), to allow it to stretch in larger browsers without losing quality?
I tried looking at the website's CSS file to see what was happening, but it's all on one line and confusing to work out.
I would add a link to the site to show how it scrolls, but apparently I'm not allowed, so a screenshot will have to do.
Many thanks in advance.
It looks like that background uses the css:
background:#000000 url(<img>) no-repeat scroll center top;
Which sets a background colour AND image, places the image statically at the top, so that after scrolling down, the background colour is only visible.
To see this effect, using chrome, change the css to:
background:#00FF00 url(<img>) no-repeat scroll center top;
and you will see what is going on.
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 would like to have a repeat-x on my body background for a web site, but the background is 1024 wide, so on wider displays, the line where the image begins again will be positioned to the right of the body, and possibly visible. My content is in a div 800 wide centred on the body. I would like the 'split' like from the repeating background to occur in the centre of the body, where it is hidden by the content.
I'm sure this is possible, with some trickery, the details of which are beyond my novice design and layout skills.
WORKAROUND: I used the Liquid Rescale GIMP plugin, which uses seam carving, to stretch the images to twice their original size. It works great, and I'm happy for now, but it's not an answer to this question.
A straightforward way to do this without any CSS trickery or extra markup is to modify the image. Center the background image with:
background-position: top center;
...and then offset the actual image file in an editor. In Photoshop use Filter >> Other >> Offset and use a horizontal value that is half of the image's width. Likewise, in the Gimp use Layer >> Transform >> Offset.
That's not the clean CSS solution you were looking for, but it's a nice pragmatic fix.
just put in the style:
background-position: 400px 0px;
this will start the repeating 400px from the left side (thus moving the split under the content)
I think it is not possible to do this dynamically (without taking the screen size into account) without using CSS expressions. I don't know the details about browser support though. A quick google search turned up this page as an example of how to do this.
http://valums.com/vertical/
Adding to what David said, creating a seamless, tiling background image isn't that tough:
Seamless background with Photoshop
It takes a bit of time, but it will look good at all screen resolutions once you're done.
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 :)
I have a really cool website that allows people to upload images. Sometimes there images are really large, as seen in the below div:
![Overflow][1]
Is there a style that can I add to my DIVs to fix this?
Link
Set your CSS overflow property on the div to one of these:
overflow: auto; /* Adds scrollbars only when necessary */
overflow: scroll; /* Adds inactive scrollbars until needed, then activates */
overflow: visible; /* Causes the div to expand to fit the content */
overflow: hidden; /* Hides any content that overflows */
You can use the CSS overflow property: set it to hidden or auto to either hide content or add scrollbars if necessary.
Generally speaking, with large images you want to thumbnail them and not automatically display them, particularly if they're over a certain size.
Using the height and width CSS attributes (or the height and width attributes) will scale the image but it'll still download the whole thing. If its large that could be a problem. It's best to generate a thumbnail on upload, display that and then allow the user to click on that to display the full-size image.
<style>img { max-width: 100% }</style>
This will make the browser resize images to fit inside their containing box. There's a few drawbacks, one being that it obviously won't work in IE6 (maybe 7?), and if the containing element has padding you'll need a wrapper around the image to make it fit.
Another great one although not fully supported would be adding max-width: 400px to your image.
Instead of using CSS, you should do a basic width & height check on your server side, and if it goes beyond a certain threshold use HTML/Javascript to resize the image. Many website forum applications do this and often allow you to click to expand the image.
Then make sure you use the Z-LAYER property to make sure the image floats above content blocks so when the image expands it's above everything.
Automatically resize each of the uploaded images, using a toolkit like ImageMagick. You'd also end up with better looking images, because it'll resample (rather than just resize).
You can then create good looking thumbnails, previews and other sizes of each images that'll fit nicely into your template designs.
If you don't want to go all the way to resizing the actual image file, and want to maintain the proportions of the image, then you can interrogate the image for its sizes (height and width) then multiply them by a required factor to fit into your div.
For example, if you have a 1024x768 image and want to put it in a div that is 800 wide, you know the width will be 800, and the height will be 768 x (800/1024) = 600. Then when displaying your image you can set the height and width properties as required.
or, with some little piece of javascript, you can check for an image width. if is larger than Xpx, then you scale to Ypx. Ofcourse, you will have a little "image flick" until the page is completly loaded.
You can inspire yourself from any IPB forum :)