Hey all! I'm in the process of setting up my website and I'm trying to find a way to have my background image (or any image) to re-size it self according to content.
My background consist of 4 corners, 4 edges and a fill for the middle. Is it possible to have it re-size? Example of how i want to use it:
My background image currently supports about 4 paragraphs and im at the bottom. What if i want 7-8 paragraphs? Will i have to manually remake the image to be longer or can i have it take the left edge, right edge, bottom corners and bottom edge pictures and and it down? I really hope that made sense haha.
I don't want to stretch the image because it loses its resolution and looks terrible.
Thanks for your time.
No.
Make the corners and edges separate images. Top/bottom edges should be tileable horizontally; left/right edges vertically.
Then have a "middle" image as your background that either tiles or is scaled in some other way. This answer may help you there.
You can do this using css3 properties. Not all browsers support this yet!
.foo {
background-image: url(bg-image.png);
-moz-background-size: 100% 100%; /* Gecko 1.9.2 (Firefox 3.6) */
-o-background-size: 100% 100%; /* Opera 9.5 */
-webkit-background-size: 100% 100%; /* Safari 3.0, Chrome */
background-size: 100% 100%; /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */
-moz-border-image: url(bg-image.png) 0; /* Gecko 1.9.1 (Firefox 3.5) */
}
https://developer.mozilla.org/en/CSS/-moz-background-size
Related
I am making a website, for my client.
Now, the website has background-image, on it's landing page, that looks very nic in all pc browsers, but there is one problem...
If you are not using google chrome, on all tablets and phones, it will make the background-image look very zoomed, and weird.
There is code(for css background-image, it should be responsive, but it is not in many browsers):
body {
height: 100%;
font-family: 'Open Sans';
font-weight:100;
color:#666666;
line-height: 1.7em;
/* Location of the image */
background-image: url(1.jpg);
/* Background image is centered vertically and horizontally at all times */
background-position: center center;
/* Background image doesn't tile */
background-repeat: no-repeat;
/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;
/* This is what makes the background image rescale based
on the container's size */
background-size: cover;
/* Set a background color that will be displayed
while the background image is loading */
background-color: #464646;
}
Link to the website
Unfortunately background-attachment: fixed and background-size: cover don't work well together.
See this question and its highest voted answer. (Just in case the question might not be there in the future, here is the answer)
Unfortunately this is simply an artifact of how fixed positioning
works in CSS and there is no way around it in pure CSS - you have to
use Javascript.
The reason this happens is due to the combination of
background-attachment: fixed and background-size: cover. When you
specify background-attachment: fixed it essentially causes the
background-image to behave as if it were a position: fixed image,
meaning that it's taken out of the page flow and positioning context
and becomes relative to the viewport rather than the element it's the
background image of.
So whenever you use these properties together, the cover value is
being calculated relative to the size of the viewport irrespective of
the size of the element itself, which is why it works as expected when
the element is the same size as the viewport but is cropped in
unexpected ways when the element is smaller than the viewport.
To get around this you basically need to use background-attachment:
scroll and bind an event listener to the scroll event in JS that
manually updates the background-position relative to how far the
window has been scrolled in order to simulate fixed positioning but
still calculate background-size: cover relative to the container
element rather than the viewport.
Because phones are usually held in the palm with their greatest length going vertically (unlike desktop computers where they are mostly horizontal in length) the use of background-size: cover; might be exposing your image as a low-resolution image.
If the image is having to be scaled up to 'cover' your browser window, it may be having to pixelate the image, especially if the device has a very high pixel-density.
This image demonstrates the issue:
The solution to this problem would be to improve the resolution of your image.
Note that the issue would be most prominent if your desired background image was landscape in nature. If it was portrait, you may find the extremities of this problem to be reversed.
I'm building a Grid with background images but things go wrong in Safari.
(Safari 7, 6 and 5, tested in Browserstack )
This is the website. As you can see in Chrome, FF or IE there's a grid with background image set inline.
http://fourseasonsrally.com/1
In Safari I sometimes see the background image but then it suddenly disappears.. I could not reproduce the error in other browsers.
This is what the grid looks like on chrome
UPDATE 1: Shorthand CSS
It seems that shorthand css is ignored by Safari, I removed all the shorthand properties but the problem persists.
Any idea what might be going wrong?
Thanks!
You mean header logo (FOURSEASONS RALLY) not visible in safari - changes the below css.
present css:
.header {
background: url("../img/logo.svg") no-repeat scroll center center / contain #111;
}
remove the " / contain"
.header {
background: url("../img/logo.svg") no-repeat scroll center center #111;
}
I've searched and searched, but I can't, for the life of me, figure out what is wrong with my background attachment. I can't get it to break free from the div. For brevity, here is a fiddle for you to observe and test. I'm working with Skrollr.js which might be a factor FYI.
The second panel that moves up over the first is the one I'm referring to. And by "break free" I mean that the #panel-2 background is traveling with the #panel-2 div to cover the first panel instead of the #panel-2 background being fixed at the top of the viewport and being "revealed" by the #panel-2 div moving into the viewport.
<div id="panel-2" class="panel" data-0="transform:translate3d(0%,100%,0)" data-200p="transform:translate3d(0%,0%,0)"></div>
#panel-2 {
background: url('http://dev.synergexis.com/skp/example-img/panel-2-bg.jpg') no-repeat center center;
background-size: cover;
background-attachment:fixed;
transform:translateZ(0%, 100%, 0);
-ms-transform:translateZ(0%, 100%, 0);
/* IE */
-moz-transform:translateZ(0%, 100%, 0);
/* Firefox */
-webkit-transform:translate3d(0%, 100%, 0);
/* Safari Chrome */
-o-transform:translateZ(0%, 100%, 0);
/* Opera */
z-index:-2;
}
Here is an example of the behavior. Given by the amazing, I Hate Tomatoes', Petr Tichy... the second section right below the header with the red and blue stars and dots is the effect I would like to mimic.
Try to avoid using css 3dtranslations, the working skrollr demo you are trying to mimic doesn't use them. I have read some complaints about css 3dtranslations ignoring fixing content to viewport before. Once you remove them, the background-attachment should start working.
I'm creating a landingpage at the moment and a key feature is that is has to be a responsive one. I have a little bit experience with responsive web design but I'm stuck at the moment.
The max width has to be 1280 pixels. So when its on a desktop it has to be 1280px wide and aligned to the center. So scaling grom 1920x to 1280px is fine. But when it comes lower than 1280px I want to let the site scale the content. But since I've put the 1280px as a static width I don't know how I can make this responsive and let it scale with it lower than 1280px
I hope I've explained it good enough. English grammar is terrible sorry.
This is a piece of the code of how my body and container is
body
width: 100%
background: -webkit-linear-gradient(#de0b1d, #8a0712) /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#de0b1d, #8a0712) /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#de0b1d, #8a0712) /* For Firefox 3.6 to 15 */
background: linear-gradient(#de0b1d, #8a0712) /* Standard syntax (must be last) */
.container
padding: 0
position: relative
width: 1280px
height: 100%
background-image: url("../img/head-image.png")
background-repeat: no-repeat
background-position-y: 150px
I think it's because it a static value but how can I make this a responsive one with a max width of 1280 px?
The background image should also scale with the max width of the screen. So I think I have to use Background-size: cover for that, right?
Thanks in regard!
use CSS media queries to trigger styles when you reach a certain screen width. http://css-tricks.com/css-media-queries/
How can I stretch background image of a table cell with CSS? I have Googled it with no results.
When you set background image of a cell and the background size is smaller than the cell, then it will be repeated.
How can I force this background to stretch the entire table cell instead?
It is possible to stretch a background image using the background-size CSS property.
Examples:
body { background-size: 100% auto } /* Stretches image to full horiz. width */
body { background-size: 50% 50% } /* Stretches image to half of available
width and height - WARNING: aspect ratio not maintained */
body { background-size: cover } /* Ensures that image covers full area */
body { background-size: contain } /* Ensures that image is completely visible */
All major current browsers support the feature:
IE since 9.0
Chrome since 3.0
Firefox since 4.0
Opera since 10.0
Safari since 4.1
You can't stretch a background image.
If you want to stretch an image, you have to put it in an img tag. You can use absolute positioning to put content on top of the image.
It is possible.
NOTE: This is using CSS3 and will not be supported by inferior browsers.
If you set your cell with this styling it should solve your problem. It will also allow for collapsible tables too because you're using %.
background-image: url('XXX');
background-repeat: no-repeat;
background-size: 100% 100%;