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 :)
Related
Been using ImageResizer quite effectively on my projects but just ran into an issue.
I have an img element that can have it's src change frequently but I always have the same dimensions of width and height to resize, along with the anchor=middleleft.
However, I don't want to upscale, so sometimes an image that is too small will be placed there and it won't anchor as desired.
Does anyone know a way to allow the anchor to still work when the image is too small to resize it? Or am I just going to have to have a fallback of css left alignment?
Try scale=canvas. This ensures the returned image is exactly the requested size, and adds padding as required.
I hope what I try is not impossible.
Let me explain first: I have a responsive design which requires a background to be fixed under some situations (media query blocks). The design in question is this one:
http://think-open.at/fileadmin/templates/responsive/content.html
Basically there are two media queries: one for the maximal height and one for the minimal width. If there is enough viewport height there is a scrollbar in the content area and the design height is fixed. But if the viewport is not large enough for showing the predefined height the height-mediaquery removes the scrollbar from the inner div so there won't be two nested scrolling containers (body + div) and sets the content area to height: auto.
There is also a responsive media query if the viewport is too narrow but this works flawless.
Now the problem: When the design switches to the mode where the whole page scrolls (below 830px height) I would like to position the image in the right container "fixed" so it does not scroll out of the viewport. But then the problem arises, that I can't really position the background in regards to the container div as "fixed" positions an background image in regard to the viewport. I have created a CSS fiddle here:
http://dabblet.com/gist/ae5c3598e1465ce0c90e
If you change the width you notice the problem. I would like to have the right border of the image aligned with the right border of the green box.
Is this somehow possible? I have no problem using calc() as there will be a condition in my CMS to use the plain old-school design if an older browser gets detected.
I solved it myself now. Sorry for posting.
The trick was: As my design is centered, I started to try using calc(50% + somepixelvalue). This did the job.
I adjusted the CSS playground:
http://dabblet.com/gist/5b63553f47a81f3bb701
Now the image is always up in line with the right border of the green area. When scaling there is sometimes a 1pixel difference but this doesn't matter as the background will get assigned to some container element which acts as mask.
I am currently making a website here. And to the right is a postcode search div. The top corner of that needs to be rounded.
I am using images to round the corners. I do not want to use another method unless it fully supports all browsers, up until IE7.
I have already done this on the navigation (to the left. only top right and bottom left corners). But I cannot seem to get it to work for the top left corner. Please help. This may be a silly little mistake I have made.
If the "postcode search div" is fixed width and height (as it appears to be), the simplest solution would just be to do the entire thing as an image, and set that as the background:
(yes, the images are the correct size and colour)
The problem is that your background color is covering your image. If you remove the background-color property, you will see the corner image.
Take your image http://molossi.psm2.co.uk/assets/images/li-bg-tl.png and add in the grey background with it. Set the width and height of the entire grey background element to 225x120 or whatever you want and you will be good to go. Basically move from it being just the corner image piece to the full image.
If you don't want to do it this way then take your corner image and make it 225px in length with the grey extending out all the way.
There are two methods for creating round corners without using border-radius (CSS3) and without using images:
Use four small divs of height: 1px and progressively increasing widths that create the round corner illusion. This is probably the better option. For a code sample, see the following site:
http://webdesign.about.com/od/css/a/aa072406.htm
Use an HTA file and browser hacks. I've never tried this personally. For code samples and techniques, see the following site
http://jonraasch.com/blog/css-rounded-corners-in-all-browsers
For older browser support using images is the best and probably only option. If you don't mind lower levels of browser support CSS3 Rounded Corners (in the CSS3 Boarders page of W3Schools) may have your answer.
I'm having one of those pull-my-hair-out moments that has become an all consuming obsession at work and I can't figure it out for the life of me.
I'm working on a site where I have a repeating background image (gradient of blue) and I need to put another image on top of that which goes beneath my "container" div. The large image that I'm having to put the "container" on top of has designs that appear to pop out of the sides.
The trouble that I'm having is this: when the user shrinks the window size, my buttons (that are within the container div) get all jumbled up and go one on top of another when I do this in IE and Firefox. I would like it to stay in the same spot on top of the large image in its spot despite the size of the window.
I think it has to do with absolute position, something that I'm not too familiar with, but I'm wondering if this is possible. I have also never used tables and have just used div tags to create sites. Fairly new at this - just have been designing websites for about a year now.
Help!
I am answering this without seeing an example, so bear with me.
It sounds as though the container div does not have a width assigned to it.
Since the container div doesn't have a width, it is shrinking and expanding causing the buttons to jumble up. Also, make sure that your buttons and such are positioned absolutely inside of your container div. Your container div must have position:relative; set in its style in order to absolutely position items inside of it. However, it sounds as though you have your positioning already set accordingly, it is just worth re-mentioning.
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.