On my new webpage (http://patrick-ott.de/ -- it is getting there ;), I seem to have encountered a problem. At the very end there is a promise for a non black/white-version but it does not show the fully colored image. That is fine, I do not want the background to scale in width (or maybe when the resolution of the display exceeds the one of the image) but I do want to see the full-length version of the background, so essentially you can keep scrolling longer. Any ideas on how to do this smart? Right now the CSS for the background is as simple as this:
.colorbox {
background-image: url(pictures/colorbackground.jpg);
height: 100%;
width: 100%;
position: relative; }
set background-size
background-size: 100% 100%;
Add this to your CSS:
background-repeat: round round;
That should do the trick. But this is a pretty new feature in CSS so it will work if you expect your users to be using IE9+ and other modern browsers.
Related
I'm using a template from semantic-ui. This one: https://semantic-ui.com/examples/homepage.html. Essentially i'm trying to change the height of the background to match the height of my image. Right now my image (the one in background-image) shows up but the background (which I turned red simply to see it better) is larger then it so I have this dead space between my background-image and the beginning of the content.
The only way I seem to be able to manipulate the background is the color. Any other time i'm changing it's size (which i've experimented with quite a bit) it only seems to change the size of the image. Not the red background.
Perhaps i'm not understanding the relationship between the two? Any tips on how to change the background's height to match the background-image?
Any help is appreciated.
CSS below:
.ui.inverted.vertical.center.aligned.segment {
background: red;
background-image: url('./images/backgroundLogo.png');
background-repeat: no-repeat;
/* background-size: 100%; */
background-size: 100% 507px;;
width:100%;
}
I found it. There was a native min-height: property that was over riding my attempts to change. Simply put in
min-height: 500px !important;
and it worked.
This is a particularly strange request, but the client won't budge.
I've almost got what I need currently with:
#main_content, .slide {position: relative; min-width: 1200px;}
.slide_layer {position: absolute; height: 100%; width: 100%; top:0; left: 0; min-width: 1200px; padding-bottom: 18px;}
.slide_layer img { width: 100%; }
Problem is, if my browser window is longer than it is wide, I end up with empty space below the image. What the client wants is for the image to fill all available height if there is room and create horizontal scrollbars as needed (rather than crop).
The solution I'm thinking of doing is just detecting browser window and stretching the .slide_layer img to fill height via javascript. But this feels crappy and sloppy. Is there a better way?
To make matters worse, backward compatibility is required back to IE7.
Thanks!
This doesn't necessarily help you with the horizontal-overflow request from your client, but you could rebuild your slides to use a background image, instead of an image within it.
You can then use the CSS3 background-size, set to 'cover':
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
This means that the background image will stretch out - whilst maintaining the correct dimensions - to fill the parent. So, unless your slide is exactly the same dimensions as the image, you'll either have a little off the top/bottom, or left/right cut off from view, but it will always stretch to cover the entire background.
This is a CSS3 property, so won't work back to IE7 without a little help. Fortunately, CSS3 PIE can help you out there to get support all the way back to those older versions of Internet Explorer.
I was wondering if there is a way to scale a sprite image to the containing div's dimensions
For example, if I have a sprite image with 10 frames (each 100x100 pixels, making it 1000x100)
and the containing div is for instance 200px in width or 50px, is there a way for the frame to be displayed correctly within the div?
Can background-size do anyting there?
Thanks
Are you using CSS3? Because of this you could do following
(HTML)
<div class='your-box'></div>
(CSS)
.your-box {
background-image: url(.);
background-repeat: no-repeat;
background-size: contain;
}
You could test it out over here, http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=contain (w3 schools ftw)
Also I have this in my bookmark, http://caniuse.com/background-img-opts which allow me to see what works for which browser.
If you'd like it to be centered, you cud add to the CSS
position: absolute;
height: 100%;
width: 100%;
background-position: center;
But as I said, this works for CSS3 and still most people uses IE8 (css is supported by IE9+) but as I said before, have a look which browsers are compitable with CSS3 link again (http://caniuse.com/background-img-opts)
There a few questions that revolve around my problem, but none of the answers pertain to what I'm trying to do. I'm using a sprite for my site logo by using a class on an anchor tag. Problem is that I have to define the pixel height and width and this prevents the logo from being responsive.
Here's the HTML:
Here's the CSS:
a.logo-sprite {
background: url('image_here.jpg') 0 0;
display: block;
width: 450px;
height: 130px;
}
a.logo-sprite:hover {
background: url('image_here2.jpg') 0 -140px;
}
Any thoughts? Thanks.
That's right. Since sprites, by definition are meant for fixed dimensions only (They are images after all), they cannot be "smoothly" used in fluid/responsive layouts.
They can be used in responsive layouts, as long as you keep making adjustments for each "level" in your media queries.
Okay, I have an idea.
You can use the background-size property to "lock" the sprite in place and stop more/less of it being shown than you want. Here is a rudimentary example:
background-position: 0px 0px;
background-repeat: no-repeat;
background-size: 190% 140%;
The only problem here is that images resize differently to elements like Divs and anchors so the height won't scale dynamically. I believe the only way to achieve this is to use JavaScript but I may be wrong.
Here's a rough example of how you might start going about something like this:
http://jsfiddle.net/VW2dW/16/
If you resize the browser you will notice it successfully scales horizontally but not vertically which is a problem.
I am looking to achieve a similar effect to this website i found: http://www.august.com.au/
When on this website if you zoom in/or out ctrl +/- the background doesn't change. Only the content zooms.
I want to be able to set a background image for my website and have it so that the background image always fills the screen regardless of the screen resolution or zoom options.
I understand that you can use the width:100% to make it fill the page, however my understanding is that this is applied as the page is loaded and if the user zooms after loading the image will not re-sized.
Does any one have any suggestions on where to start with this one? I have tried search the web for information but wasn't able to find very much.
Also i am guessing this will be achieved using something like JavaScript and not css??
This worked for me in chrome, firefox
.someImage {
width: 7%;
height: 0;
padding-bottom: 7%;
background-image: url('../img/myImage.png');
background-repeat: no-repeat;
position: fixed;
bottom: 5%;
left: 5%;
background-size: 100% 100%;
}
Turns out there is a nice Jquery plugin for this:
http://bavotasan.com/2011/full-sizebackground-image-jquery-plugin/
Seems to work as i expected.