I have an element with multiple background images like this:
HTML
<div id="myDiv"></div>
CSS
div {
...
background-image: url("img1"), url("img2"), url("img3");
background-size: 30px 30px, 30px 30px, 30px 30px;
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: bottom left, bottom center, bottom right;
}
Now I want to get "background-image" style value, so I tried to do the following:
JavaScript
bgImg = $("#myDiv").css("background-image");
console.log(bgImg); // expect -> url("img1"), url("img2"), url("img3")
It works well on Chrome / Firefox / Safari on Mac OS.
However, with default browser on Android (OS 2.3.x),
it outputs the first background-image element.
url("img1")
Does anyone know why and how to obtain multiple "background-image" value on
Android's default browser?
Sample Code
http://jsfiddle.net/kakipo/r3HMF/1/
(For mobile access: http://jsfiddle.net/kakipo/r3HMF/1/show)
Related
I want to make background-image responsive after resize windows with specific width, like this main img http://preview.oklerthemes.com/porto/5.4.0/demo-construction.html.
This is what you can find in the construction site example using the developer tools:
You can set the background-size to cover.
.element {
background-image: url('*');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
Where * in the url() is the path to your image.
Or simply use the shorthand version:
.element {
background: url('*') no-repeat center center/cover;
}
http://www.leona-anderson.com
body {
background: url(http://leona-anderson.com/wp-content/uploads/2014/10/finalbackgroundMain.png) fixed;
background-size:100% auto;
}
I have a different Background images on each site an since they are 1080p they take a bit to load.
I use wordpress 4.0.5 with minamaze theme.
I have found out that my use a preload javascript function, but in my case on the frontpage I do not have information about the background image of the other sites so I am hoping someone could provide me with a different solution.
My images are .pngs with round about 1mb size, maybe I also could try to compress them some more?
Thanks in advance
You shouldn't use .png for such an image. As a general rule, photographs should be .jpg and graphics (eg. logos) should be indexed .png
I reduced the file size by ~93% down to 89KB from 1.3MB and the visual difference is barely noticeable.
Here's the optimized image: Optimized
And here's yours: Original
You can cut down the time which your website takes while loading by a huge margin if you use CSS3 background-gradients instead of the large background-images. Talking about your homepage background-image for instance, you can create a background=gradient like this and use the image of the lady as the background-image and position it to the right:
#content {
display: block;
height: 1500px;
}
body {
background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -webkit-linear-gradient(left, #ba53a0, #fff);
background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -o-linear-gradient(right, #ba53a0, #fff);
background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, -moz-linear-gradient(right, #ba53a0, #fff);
background: url(http://s29.postimg.org/gxm9ideuf/ladyimage.png) no-repeat right top fixed, linear-gradient(to right, #ba53a0, #fff);
}
<body>
<div id="content"></div>
</body>
I think the way to go is compress to JPEG files. You can choose the degree of compression in most software (I use GIMP). 1 Mb is by all practical means way too big for a background image.
Since you only use a gradient and the woman, you could realize the Color gradient with css3 and only load the woman as an image:
CSS:
body {
background: -webkit-linear-gradient(left, #B200FF , white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #B200FF, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #B200FF, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, #B200FF , white); /* Standard syntax */
}
Fiddle: http://jsfiddle.net/n4anrzk8/1/
Or you try to use https://tinypng.com/ to get smaller png files, if it has to be an image.
Another, pretty bad method, would be loading ALL images with width 0 at the first page. They are not visible, but the browser will save them in the Cache (if the visitor using the Cache of his browser). I don't recommend this method, it's just for completeness.
Compress your image using https://tinyjpg.com or https://tinypng.com.
Always make sure your image is as losslessly compressed as possible, it will create a huge difference in loading time.
How can I set a background image which is not scrolling along with the content. I'm using jquery mobile and phonegap. I try to use background-attachment: fixed but the image is not going in fullscreen.
<div data-role="page" class="background">
</div>
My css:
.background {
background-image: url(../images/bg.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment:scroll;
background-size: 100% 100%;
}
I had to tackle this problem, the work around (as far as I am aware it hasn't changed in iOS7) is to create a separate div (call it the "background" div), set its position to fixed and insert your desired background image inside this div.
Set the z-index of this div so that it sits underneath the rest of your content.
iOS webview will respect fixed positioned divs but not background-attachment: fixed;
Set the background once, inside the <body> of your html file(s) but outside your subsequent pages.
Here's how I did it and it worked really well.
<div class="background"><img src="img/Background_Dark.png" width="100%"/></div>
and the css
.background {
position: fixed;
top: 0%;
left: 0%;
min-width: 100%;
z-index: -10000;
}
First, you need to cut out half of the CSS. Start with this:
.background {
background-image: url(../images/bg.png);
background-attachment: fixed;
background-repeat: no-repeat;
}
Notice that I changed background-attachment: scroll; to background-attachment: fixed;. The default value of background-attachment is scroll, so you don't need to include it anyway, but that does the opposite of what you are trying to do.
Second, can you upload the bg.png to imgur or some other site so that we can have a better example of what you're trying to do? And also fill in your div with some sample content of similar length to your actual content? Since this is a div and not the body of your website, the div is collapsed unless there is content inside, and the div will grow to fill the content.
This means if you set background-size: 100% 100%; you will be stretching the image as far as the content of the div; which isn't what you want. You only want the background image to fill the viewport. Setting background-attachment: fixed; accomplishes this.
You can use iscroll plugin.
Page in jquery mobile executed by java script source code and in some of the elements changing in css not works.
I used this post Stretch and scale a CSS image in the background - with CSS only to figure out how to stretch my background image to fit the size. I'm using background-size: cover;
But I'm afraid, that's not quiet what I need. I can't figure out (a nice way) how to do it:
Assume that I have an image with an really wide resolution like 3840px x 1024px
Requirements:
The Image is centered
Viewport width < 1280px: Fixed width of 1280px, horizontal scrollable
Viewport width >= 1280px: no horizontal scrolling, show more of the background image
If the content of the site is really long (above the 1024px) I want to add a color above the image like light blue, if the upper part of the image is sky so it seems like the bg-color is part of the image.
Current implementation (which sucks):
The image is cut into 3 even pieces. The middle part is the background of the content section. If the screen increases in width, 2 divs left and right of the middle part will be shown, they have the left and the right part of the image as background). The size (height and width) of this side divs is calculated with js everytime the windows is resized. The offset of the background images works in Chrome but in Firefox there is a issue with the left div.
The code for this is:
var PageWidth = 1280;
var SideImageWidth = 1280;
function calculateImageSet(){
var bodyWidth = $('body').width();
var fillerSize = Math.floor((bodyWidth - PageWidth)/2);
if(bodyWidth < PageWidth){
$('#fillerLeft').hide();
$('#fillerRight').hide();
}
else{
var imageOffset = SideImageWidth - fillerSize;
var mainHeight = $('#main').outerHeight();
$('#fillerLeft').width(fillerSize).height(mainHeight).show();
# Doesn't seem to work
if($.browser.mozilla){
$('#fillerLeft').css('background-position', '-'+imageOffset+'px 0px');
}
$('#fillerRight').width(fillerSize).height(mainHeight).show();
}
}
Is there a nice way to do this? Without js?
If you didn't understand any of the requirements, please ask.
Thank you
Edit:
I've got a (nearly working) approach:
#main{
background-color: #d4eaff;
background-image: url('forest-wide.jpg');
background-repeat: no-repeat;
background-size: auto 1280px;
background-position: center top;
min-width: 1280px;
}
If the content is not higher than 1024px this is nice, but when it is over 1024px it adds the blue to the bottom so I have to change the background-position to center bottom at this point.
well bro if what you are trying is to get a fully stretched background image i guess this would help you out .... purely CSS based works in Safari 3+,Chrome Whatever+,IE 9+,Opera 10+,
Firefox 3.6+
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I got a paragraph and i wish to have a visible "marker" to show the start and end of the paragraph to the user.
I got no problem to show the backgroundimage on the upper left, but i do not know how to position the background-image to the lower right end. Here my css for positioning the image to the upper left:
p[class] {
background-image: url("../../image/my_image.gif");
background-position: left top;
background-repeat: no-repeat;
}
I am not looking for a solution using additional html elements!!! It needs to work using css only! Due to the fact that the paragraph has set pseude-before and pseudo after elements i am not able to use them here. So the question is:
How can i position a background image to the top left and bottom right of a html element without using additional html elements but css only (and no pseudo elements)?
Cyrille is near but wrong. it needs to be background-position: right bottom;
in general - its posible to use numeric values.
So for background-position: right bottom; you can also write background-position: 100% 100%; and background-position: left top; would result in background-position: 0 0;
also take a look at the W3C specs on this: http://www.w3.org/TR/css3-background/#the-background-position
to sree's comment of above: this is completely wrong, left: 0px ; top:0px; does refer on positioning of the HTML element itself when using position:relative or position:absolute
edit:
if you like to use multiple backgrounds you can note it als follows:
p[class] {
background-image: url("../../image/my_image.gif"), url("../../image/my_image.gif");
background-position: left top, right bottom;
background-repeat: no-repeat;
}
look at http://caniuse.com/#feat=multibackgrounds for cross browser support
greets
tom
If browser support is not a problem for you, you could do with CSS3 multiple backgrounds: http://www.css3.info/preview/multiple-backgrounds/
What about trying background-position: bottom right instead of left top ?