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.
Related
I found out that the problem is caused by the url bar in Chrome on mobile device.
What it does is that when the page is scrolled to a point where the url bar disappear (or shift upward "out of the screen"), my background image shifts up along and leaving a white space, the same height as the url bar, at the bottom.
When I keep scrolling, my background image resizes(in this case expands) to fit the viewport size.
What I would like to achieve is that the background image stays the same size and does not jump around, basically ignore the effect of the url bar.
I searched for solutions, however they usually involve JS, as a beginner I only know HTML and CSS at the current stage, hence I was wondering if there is anyway I can solve this problem using just CSS.
ps: I encountered this problem when doing my freeCodeCamp challenges, although it was not part of the assignment, I wanted to get myself used to mobile website responsivity. Below is my code for the background. Thank you very much!
body::before{
content:'';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -1;
background-image: linear-gradient(0deg, rgba(250,250,250,0.2497592787114) 0%, rgba(250,250,250,0.7483587184873958462) 100%), url("https://i.imgur.com/zvKvhA5.jpg");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
So I have this tricky layout that's giving me headaches.
I've placed few triangles (using svg polygon) and they seem to work fine in Chrome, but bug out a bit in Edge & Firefox.I tried using border and box-shadow to hide it, but it doesn't seem to help.
Is there any way to hide the white gaps? (on grey, orange and blue parts) (If you don't see them at first - try to resize the window a bit and it'll snap at some point)
#update2: setting borders for adjactent div looks like a workaround for now
I've also tried using a single css clip-path with a polygon that's shapped like a trapezoid, but it's not widely supported. The other thing i tried is to use css transform skew(), but I found it troublesome to position properly, as the following sections have to move accordingly to the side to match the degree of skew.
If you at least think there's a better solution to make this, please give me a hint and I'll try it out.
Here's the code for the version with svg triangles:
And for the clip-path version:
And the skew version:
#edit1
I've discovered that setting a gradient could help, but it leaks out on the corner...
background: linear-gradient(left,
rgb(253, 96, 64) 0%
rgba(255,255,255,0.8) 8px,
rgba(255,255,255,0) 100%)
#edit2
Changing the div neighbouring to the triangle to:
border-right: 1px solid rgb(253, 96, 64);
position: relative;
margin-right: -1px;
seems to be a good workaround. I've updated it in the sandbox.
I need a smart/tough guy to help me with my issue right now.. please check div that set css multiple background image ... in that image I set the background of a div in a gradient color while I called other background images that looks polygonal, and the css is something like this:
.at{
height: 650px;
padding-top: 130px;
background-image: url(../../../img/2nd_element.png),
url(../../../img/1st_element.png),
url(../../../img/3rd_element.png),
url(../../../img/4th_element.png),
linear-gradient(to bottom, #017a92 0%,#91d2c1 100%);
background-position: 3em 60px, left bottom, 70% -90px, right top, left bottom;
background-repeat: no-repeat, no-repeat, no-repeat;
}
I needed to animate these different background images with offset(and it depends on the scrolling page that if this content is centered).
for example: bg-image1 = will appear after 3s, bg-image2 = will appear after 4s, bg-image3 = will appear after 5s.. then etc etc... until the polygonal background images completed.
I'm not sure if this can be done by jQuery or javascript or css3 animation or svg animation but I think you get my point sir! thanks for helping! looking forward to donate who can help me with this! thank you!
I have a really big image 4096 x 4096. I want to make it my background image for a site and when the site loads I'd like the full image displayed on any screen size, but I also want it to be zoomable.
Right now I've just made the image have height and width 100% in my CSS but obviously that keeps it at 100% no matter what. Any thoughts on how to achieve this?
I think what you might be looking for is using something like leaflet to allow you zoom in to an image.
This link here explains the process of breaking up the image into the required tiles.
Does that help?
Maybe you just need a property background-size: coverin background like below:
body {
background: url(xxx) no-repeat center center;
background-size: cover;
}
If I understand you question well, then, simply doing the following may be what you want :
body {
background: url(path-to/4096x4096.jpg) no-repeat;
background-size: 100%;
}
See the jsfiddle demo.
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)