I am aware that several techniques exist to have a fullscreen background image, either with CSS3 or with absolute positioning and 100% height/width.
However, all these techniques result in fixed background images, meaning that if you have some content bigger than the screen that needs a scrollbar, the background image will stay fixed when scrolling.
Is it possible to have the background image stetch to the width/height of the page, instead of the screen?
I had the same problem as I'm building a fullsceen slideshow: fixed position makes images stay in place while sliding containing element instead of letting them sliding with this element...
I tried a lot of workaround using those techniques:
CSS-Only Technique #1: works fine with position set to relative, but doesn't center the image verticaly.
Awesome, Easy, Progressive CSS3 Way : I tried all possibilities in vain before to realise that not filling the position value worked (really awesome)!
html {
background: url(images/bg.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I'd point you to the backstretch jQuery plugin to add this functionnality to your page. The linked page shows how the content stays fixed and scales according to the width/height of the browser.
edit
I'm not really sure how i would implement such a solution; i think you may have to use javascript since you can't find out the size of your content before it's loaded. Here's how i would try it:
calculate the content size after load
set the stretching of the background image to the content size
bind some function that repeats this to any browser size change
I'm not really sure how it would feel performance-wise, but one may drawback to this technique is that unless you set size limits to your content, you may have to use a very large image to cover all cases.
The problem with such an approach is that you can never guess how big your content is going to get; 1,000 pixels? 10,000 pixels? imagine stretching an image that big, if you decide to use a huge image it will slow down your page loads or if you decide to go with a reasonably sized image it will distort very badly if it goes outside its boundaries.
Take this for example and increase the content count accordingly and see how the background image distorts: http://jsfiddle.net/andresilich/75Sfp/
Suppose you want a variable image-size header in your website (which occupies the complete height)
Inside your header add an ID or class with whatever naming you want.
I will take it as (id="test")
Now, go to the linked JS file and paste this..
var x = screen.availHeight + "px";
console.log(x)
document.getElementById("test").style.height = x;
Related
On Apple.com, their homepage, underneath the slides, you see 4 clickable posts/images and when you scale the browser window(or use a phone or tablet), they scale according.
Is their a plugin for Wordpress that mimics this type of behavior or HTML code?
Where you can have 4 images to scale to the UI, simple HTML code?
I know there are plugins that do this with latest posts but its not what I want. Thank you in advance.
Example image
They are using the background-size attribute. What that does is ensure the image is contained within the parent element and scaled up or down to ensure that it's at 100% width and height but still within the parent container.
It accepts a couple of properties. Here is the table of browser support.
background-size: contain;
Contains the image within the parent element and does not overflow.
background-size: cover;
Ensures the background image covers the full width and height of the element it is applied to. It won't skew the aspect ratio, it will simply overflow the element to the right size to maintain the aspect ratio.
Also, just to note, you can use pixels and media queries to explicitly set the image width/height ratio. This would look like this and goes in the order of width then height and if you use one value instead of two, that will also work.
background-size: 250px 150px;
Note that the background image is contained to the element it is applied to regardless. So even though it technically overflows when using cover, it doesn't visually spill over the element so it doesn't look messy.
I have been doing some HTML and CSS and have come across a problem that I hope someone can help with.
I am trying to make a full width picture cover a whole Div without a significant loss of quality to the picture.
An example of what I am trying to achieve is similar to the following websites:
https://sso.godaddy.com/v1/?app=mya&realm=idp&
http://www.ugle.org.uk/
Both websites use a picture which quality seams to not dissolve through being expanded or contracted.
How is this done?
Any one know of any tutorials or have example code that they could show me. I have created a picture that can vary to the browsers window size but its quality is awful when the browser changes size.
Thanks in advance everyone!
Very easy. There are a few ways to do this, but the most straightforward is to set the image as the background of the div, with the background size property set to cover: background-size: cover;
For example (CSS):
div {
background: url('path/to/your/image.jpg') no-repeat center;
background-size: cover;
}
Edit: Addressing image quality:
You'd need to make sure your background image is equal to or larger than the div's dimensions. If it's smaller - it'll be stretched to fit (this degrading the quality).
first of all keep in mind I uderstand a very little of HTML language...
if you answer, do it as if you'd do it to a 10yo boy...
The question:
I'd like to have a background image in my website and another one on it.
the bg's image can be freely resized to match the screen or mobile size,
but the second one should keep its aspect ratio....!
http://www.flickr.com/photos/110747328#N03/
![you'll see on the left the full screen size and on the right the mobile size][1]
I dont know if understand you correctly. Here's what I get:
You want your bg image to be dynamically resized according to the size of the screen, but not the "content".
You can get the first by using the "background-size: cover"'s CSS property for your background:
body {
background: url('path-to-your-image.jpg') no-repeat center center fixed;
background-size: cover;
}
After that, if you just create a div and put your content in it. You'll get what you want: for the background to be resized and the content to keep its proportions.
Here is a live example: http://jsfiddle.net/agarridob/8NtwE/
By the way, I strongly recommend that you take a look at http://www.bentobox.io, where you'll find lots of resources that will help you understand a bit of what this HTML & CSS is.
I'm trying to make a page that can scale down to support small browsers, but take advantage of the majority of browser sizes that most visitors are using.
I have a background image that is bigger than 1024x728, but the most important parts of the image are contained within 1024x728... It's like a magazine's bleed - there's extra image there if its needed (and it looks better if fully expanded) but it's not necessary.
I have included an example to illustrate what I mean:
http://tinypic.com/r/24l5she/7
The "background image" is the entire red box in the larger browser window, and there's a repeating texture it sits within (the blue). The "white box with red arrows" is the "minimum size" I want to accept. What I am trying to do, depending on the size of the user's browser, is cut out parts of the image until the browser reaches some specific minimum size.
Can this be done within a framework like 960.gs?
Really looking forward to your responses!
Cheers,
Put your page in a fixed-width wrapper div, then add a centered background-image to the body tag.
With CSS3's background-size property, you can force the image to stay a constant size. Then it's just a matter of a no-repeat center center bit in your background declaration.
div {
background: url('yourpic.jpg') no-repeat center center;
background-size: 1024px 768px
}
You didn't really want to support IE<=8, did you?
Not an answer but more of a food for thought...
Seeing as your background image is so large, you may want to just remove it from mobile devices. While most of them can handle it, it's just extra data that needs to be transferred and most mobile carriers have strict data limits.
Like I said, just something to consider. :)
I'm working on a website with a em-based layout (so it can stretch and compress gracefully when users increase or decrease font size). This site has a header that should be displayed across all pages. I have a "header" div in all pages, and the site-wide css file includes the code:
#header
{
width: 50em;
height: 6em;
margin-bottom: .5em;
background: url("/IMAGES/header.png");
}
The problem is that this doesn't really stretch gracefully. When text size increase, the height and width change, but **the image doesn't increase in size; it simply repeats*.*
How can I make my image stretch and squish, instead of repeating or getting cut off? (I'd like a css-based solution if possible... I've got some html ideas in store, already).
There is no way to use css to strech a background image. You would have to use javascript or something similar. However, if you have an image that doesn't need to be repeated (e.g. blends into the background), you could do something like this:
background-position: center center;
background-repeat: no-repeat;
Addendum: The position has the following format: <top|center|bottom|xpos> <left|center|right|ypos>
where xpos and ypos can be given in the regular fashion (em, px, %, etc...).
The only way I've ever found is:
Set background of #header to bgcolor of header image.
Place new div inside #header
Split header image into 2
Set left half of new image as #header background aligned-left
Set right half of new image as #header.div background aligned-right
Of course that's only going to work with appropriate images though.
I'm pretty sure you can't change the scaling of background images. If your header.png file was included as an img tag, then you could set its height and width to be a number of ems and the browser would resize it (usually making it look like crap though).
Remember as well that pretty much all the modern browsers do page zooming these days, which will scale everything up without changing your layout too much. Perhaps tell your users to use that feature?
#Pianosaurus, I think your idea may be the simplest, although limited. Simply, don't stretch the image, but make sure it looks good when it's not stretched (center it, and don't let it repeat). Also, if you use a fair amount of padding at the edges of your header image, sizing the page down wouldn't cause such big problems, either.