Duplicate of:
Stretch and Scale CSS Background
How do I stretch a background image to cover the entire HTML element?
background image doesn’t stretch full page width
I've got a webpage background image, which needs to be displayed fully at 100% of the window's size. If the window is resized, the image needs to resize with it, to stay at 100%.
CSS does not allow you to set the sizes of the background image, only the way it repeats. (but I want it stretched)
I assume jQuery is the safest and quickest way of realizing this, to overcome browser-incompatibleness. Or can this be done quickly with regular javascript?
This link might interest you:
How Do you Stretch a Background Image in a Web Page
Related
When the webpage is on the big screen everything is perfect. All 3 blocks of text are inline and the white footer comes right after the background picture.
But when I resize the window webpage automatically adds space after the picture.
Not sure what I should do: have my picture repeated? But that won't look good. Leave it as it is? Not sure what to do? What is a good solution for this?
If you have a background image, you can set the background-size to cover to ensure that it always covers the whole element.
See example here: https://jsfiddle.net/ut04htu0/
If the background is an image(tag), through jquery set the height to window height in resize function.(jquery).
$(window).resize(function(){
$(".img").height($(window).height());
});
Here img is the class used for image tag.
Hopefully this solves your problem
I have a static website and I need to create a background slider with a fixed height of 587px. The width of each image is 2000px wide, but the user only needs to see the image to the width of his or her screen beyond 1000px, the width of the website. The image does not ever need to move, stretch, or respond in any way.
It needs to look and function like, www.adsphoenix.com/2013design/index5.php, but be a background slider. If you select "view background image" (Firefox), you will see the image is wider than most screens. It is aligned to the center and top.
The problem I have is finding a slider to allow the image to go outside of the 1000px website. For example, www.adsphoenix.com/2013design/. All of these images are 587 x 2000px.
Something similar to this would be, www.chattanoogafun.com. However, this slider stretches.
Do you know of a pre-built slider that would work? Or a slider I could change the alignment of? Or something I could do to my code to allow it to work? I have hosting with Blue Host.
You can add the image as background image of a slider div with CSS and use this code:
.slider_div { //or another selector
background: url(../path/to/image) center center no-repeat;
}
If you want to slide your background, you'll need inline CSS to set the background of the slider divs (or use jQuery for that).
Sorry for the title, it's a hard issue to summarise. At the moment, I have a website which looks like this:
(as you can tell, it is inspired by Metro). I have uploaded it to jsfiddle here: http://jsfiddle.net/r46bY/4/embedded/result/
The div surrounding everything (represented by a dotted border) resizes to fit the user's browser window and I want the buttons (which are simply coloured divs) to do the same but can't figure out how. At the moment, they're in place using absolute positioning and based on a particular screen size. I would like them to keep the same layout but resize along with the container div.
I've experimented with liquid values in CSS, but I can't get the positioning right.
Please help.
Use only percentages instead of pixels for your dimensions (including margins). At resize you only have to resize the surrounding div, and the content should take the right dimensions.
I am trying to resize all elements on a web page upon resizing the window. The background image needs to stretch along with draggable items, text boxes, font size, and other images. The draggable items needs to stay in the same place in proportion to the background image. Everything needs to maintain aspect ratio. I have tried numerous methods and none seem to work.
As far as the background image scaling to whatever is going on on the page, see my reply to this guys similar question.
resize the image to fit the dimensions of TD
as far as other objects changing but maintaining aspect rations you may want to look into css Media Queries.
good luck
I'm trying to make the background image as professional as possible so I'm thinking it's best to resize it based on the size of the browser or the resolution (not sure what's usually used, but I think browser size makes sense here). The idea is if the viewer screen is small, the background image gets smaller, and as the screen gets bigger, the image expands to fit its maximum size.
I will try a CSS or even Javascript (JQuery) solution as needed.
I guess you're looking for something like that:
http://css-tricks.com/how-to-resizeable-background-image/
You will need to stick to CSS 3 background-size property to achieve this: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm
Without using CSS 3 you cannot resize the background image in any way on the client.