I have question about site performance. I have 4 large images (1920*500px) that need to be show on the home page in some kind of slider - user need to click for the next image to show up, it is not slide show.
When home page is loaded, only first image is being seen, and rest are need to be seen only at user request.
My question is next. Is it smart to create one large image (sprite) and use this as background (this images have focus on centar, and users which have display that supports this resolution can see the hole image, users that don't have that kind of display will see as much as they can) or to go with standard img tag, or there is some better way to do this?
The advantage of using a sprite is that you are saving HTTP requests and preloading images (which is essential for responsive image rollovers, for instance).
In your case, I don't think sprites make any sense. First, you are only saving three http requests (the first image is presumably visible when you load the page) and you are forcing every visitor to download these large images even if they aren't going to see them.
Im not sure I understand what your asking, but if your always rendering one of the images,then it may be smart to just create a full screen background image like this. You can also change the background image with js when necessary
<style>
html
{
background: url("your image") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity:1;
}
</style>
Change the class with jQuery.
.bg-1 { background: url("your image") no-repeat center center fixed; }
.bg-2 { background: url("your image 2") no-repeat center center fixed; }
.bg-3 { background: url("your image 3") no-repeat center center fixed; }
Related
I have made a background image, 1366px wide and 768px high, which I want to use as background for the main page of my website.
I have each page of my website divided in sections, using the FullPage plugin.
This is the main page so I'm using just the first section.
What I've tried so far is adding this CSS code to the #first section of my main page:
#first{
width: 500px;
height: 500px;
background-image: url(images/ClanshnowXmasEventSmall.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Unfortunately the image gets displayed just partially. In fact it's a little shorter than it actually is.
I read the documentation for the background-size attribute, and at the cover attribute it says:
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
So basically how can I make my background-image fit the screen size? Considering the mobile side I think it would be better to fit just the width of it. I'm open for suggestions and help!
Take a look over here: https://www.google.be/amp/s/css-tricks.com/perfect-full-page-background-image/amp/?client=safari
Good luck!
I'm new to Bootstrap 3 (part of the problem), and I'm trying to set up a quick portfolio site for a class. I'm using the One Page Wonder starter template from here: http://startbootstrap.com/one-page-wonder. I've got a problem with the one-page-wonder.css stylesheet. I'm trying to change the header image from the placeholder, and I added a style for an essay, but neither change shows up when I drop it onto the server. I have deleted the entire bootstrap folder on my server and reuploaded it, but whenever I go to my page and check the code, it shows the same placeholder image and the same old style sheet. Here's the style I want to use:
.essay {
text-indent:50px;
}
.header-image {
background:url(/images/Fire.jpg) no-repeat center center cover;
background-position:top;
height:auto;
display:block;
width:100%;
text-align:center;
}
Here's a link to the page: http://jonathanalumbaugh.altervista.org/courserequests/photographyone.html
It's really annoying, I've looked through all the code, but it always reverts to this placehold.it thing. I've tried clearing out cookies, cached images, and files, but to no avail.
You're applying your CSS style incorrectly. You are passing an invalid value to background-image - that property expects only the URL to the image.
You are looking to set the background property, which is a shorthand property for multiple other properties. You can use it like this:
background: #000 url(/images/Fire.jpg) center center no-repeat;
ref: https://developer.mozilla.org/en-US/docs/Web/CSS/background
You should always ensure your CSS is valid:
http://jigsaw.w3.org/css-validator/
Note: Your image still can't be found. Where is it?
You can't include cover in the background shorthand, you need to do something like this:
html {
background: url(/get/the/right/url.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
So I am having just a small issue with a site that I am modifying for a client: http://gator3094.hostgator.com/~sunhome/staging/.
As you can see, the background image that I am putting around the <header></header> tags is not stretching the full height of the div.
Here is a link to my CSS file (everything else is just stock Foundation Framework): http://gator3094.hostgator.com/~sunhome/staging/wp-content/themes/sunpower_theme_sunsolar/library/css/custom.css
Here is also the CSS code that I am using for that particular section of the site:
header {
background: url('http://gator3094.hostgator.com/~sunhome/staging/wp-content/uploads/home-bg2.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
I have done these full-width cover backgrounds with CSS3 a million times, but I have absolutely no idea why this time the image won't cover the entirety of that div.
Hopefully it's just a super simple fix. I would really appreciate any and all help.
Your issue is because of the lack of appropriate cropping of your background image.
Try this with your header tag:
header { background: black;}
You'll see that the background takes up the appropriate dimensions of the div. The reason white space is showing is because your background image has a lot of extra transparent space around the image. So the background is repeating appropriately, you just need to crop it so it will show the part of image you want.
Still dont belive me?
Try replacing it with this:
header { background: url("http://placekitten.com/1800/950");}
I'm just starting to understand enough HTML / CSS to drive myself crazy trying to implement new things.
I'm trying to create a landing page with a full width / height background image that resizes with the viewport. That's an easy enough proposition if you're not using any css framework but I'm trying to build bootstrap into the page.
With bootstrap any content that I add below the body selector clears my background image as if it were part of the normal box model. If I remove bootstrap the page functions as expected and overlays the content on top of the background image. I'm guessing something in bootstrap is clearing all page elements but I haven't been able to find it.
The code I'm using to apply the background image is:
html {
background: url(../img/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: -999;
}
There is an (indirect) example of a fullscreen background image using Twitter Bootstrap in this blog post.
The gist of it being:
body {
background: url(../img/bg.jpg);
}
I created a background for my website using CSS code it successfully worked but the problem is once I run it on different screen whether it was big or small I don't get similar consequences. When I run it on 13 inch screen the browser zooms in and the form what I get is probably not the same as in 18 inch well it obviously wouldn't have the exactly form but more or less I need it to be shown look-like. any suggestions? thnx in advance
body {
background-image: url(../images/background.jpg);
background-repeat: no-repeat;
}
An addition problem I have now is that the background isn't full-screen. its resolution is 1920x1080, though I can see the picture on the whole web browser page but still I couldn't see other details of the photo.
I think you need
background-size: cover;
There are some browser inconsistencies, which might mean it is better to use a jquery plugin.
Have a look at http://srobbin.com/jquery-plugins/backstretch/ it allows you to use a background image which resizes depending on the size of the screen. It also deals with IE. Nuff said.
Also look at http://css-tricks.com/perfect-full-page-background-image/
I'm not 100% on what you are trying to achieve but the above links are worth a look.
This is the css3 way
html {
background: url(../images/background.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}