I've never before run into a CSS problem I couldn't seem to figure out, but I'm just baffled by this one. I have a element in which I'd like to have a fixed background image, and I'm intentionally using an image that's quite a lot larger than the element because I'm not using media queries for this particular project, but rather just want to have the image scale to the element width. For some reason, however, when I switch the background-attachment to fixed, the image uses the boundary of the parent element as it's reference point.
I'm using the Foundation 4 framework (I use it all the time), and as such the parent element is a row class, so that's worth noting, but I can't figure out what about that might cause this problem. Here's the style definition I'm using (I've broken the background declaration apart for trouble-shooting). Ideas, anyone?
#page-content {
min-height: $publicContentHeight;
background-color:rgba(255,255,255,0.25);
background-image: url('../img/paper_phren/pages.bg.fludd.png');
background-repeat: no-repeat;
background-position: 0 0;
background-size:contain;
background-attachment: fixed;
box-shadow:0px -5px 10px rgba(0,0,0,.3);
}
Hard to say without seeing your use case, but I've found that background-size doesn't work well for scaling an image to fit the width of any screen size without overflowing it's container. What most seem to do, and what I've now adopted, is just using an img element for the background. Yes, it's not as semantically accurate, but the control you gain is beyond worth it. Microsoft.com along with many others are using this for scalable background images.
Are you trying to fill the element and therefore don't mind if the background image scales outside of the element on either the height or width depending on the ratio? If yes, try: background-size:cover;
Foundation + off-canvas + chrome + background-attachment: fixed = problem. Or so I have heard....
http://foundation.zurb.com/forum/posts/1799-an-off-canvas-story
"1- Only in chrome for windows(or so internet say): background-attachment: fixed behave wierd with animations. Specially if you wrap a self animated offcanvas around all your fixed backs.
Notice: this has nothing to do with Zurb, but with chrome."
Related
I've run into an issue when using background-position in a div along with background-size: cover. There seem to be some quirks in the browsers calculations, so I'm looking for a reliable way of doing this.
More detail...
The use case is mostly visual and everything in the interface should scale nicely. In the past I've has good results by either using rem or em units for everything.
At the start or when the screen size changes I'm measuring the available screen space and then set an appropriate font-size on the container. Something like this...
const size = calculateSize();
$("#container").css({fontSize: size + 'px'});
Generally, it works very nicely. Everything scales and positions itself properly - or does it?
I recently added a graphic button - a with a background image.
.button {
background-image: url("img/button.png");
background-size: cover;
width: 10em;
height: 4.5em;
cursor: pointer;
}
.button:hover {
background-position-x: -100%;
}
I did also try background-position-x: -10em, but I prefer the percentage notation as it takes care of itself if I resize the button image.
That's when I started noticing a small, but annoying problem. When I hover over the button, it moves just a little bit. The amount varies depending on how large the available space is. It's usually only a pixel or 2 at the most. It seems equally affected by Chrome, Firefox, and Edge.
It might not seem like much, and maybe I can just accept it as a feature, but I'm wondering if anyone else has experienced this and found a way around it.
One likely solution would be to just use separate images for the different button states, but I prefer keeping the number of images to a minimum.
UPDATE: So, I just tried creating 2 separate images, and then changed the CSS accordingly...
.button {
background-image: url("img/button0.png");
background-size: cover;
width: 10em;
height: 4.5em;
cursor: pointer;
}
.button:hover {
background-image: url("img/button1.png");
/* background-position-x: -100%; */
}
This does make the wobble movement go away, so I'm pretty confident it's some specific issue with how the browser is interpreting background-position-x. Being such a small movement, I suspect it's some sort of rounding error.
Minimal, Reproducible Example:
In an attempt to ensure I wasn't just seeing things, I put together a jsFiddle that illustrates the problem...
https://jsfiddle.net/xtempore/nfLh86sm/8/
I made a simplified version of the button image. It's just black on the left half and very pale grey on the right. Then I put it into 4 different divs each with a different font-size.
When you hover, you should just see the rectangle change from black to grey. And on the 1st and 3rd ones it does. But check out the 2nd and 4th ones! When you hover, there's a sneaky little bit of black appears on the left-hand edge.
The units used are pretty straightforward in this case. The problem seems to appear with odd-numbered pixels. In my case sometimes these font-sizes will also include decimals (e.g. 15.45px).
This problem demonstrates an issue with rendering in the common browsers (Chrome, Firefox, Edge), but I managed to find an alternate method that gives the desired result.
Instead of using...
background-size: cover;
... you can use a percentage, for example ...
background-size: 200%;
If your base image is 2 sprites wide, i.e. contains two images for different states side-by-side, then the specified background-size should be 200%. Similarly, if you have 3 times the size, 300%, and so on.
This gives the desired scaling, even as the div changes size.
You can see that the problem is resolved in the example fiddle by just changing that value from cover to 200%.
With problem: https://jsfiddle.net/xtempore/nfLh86sm/8/
No problem: https://jsfiddle.net/xtempore/2vcg4h1L/
I hope this helps someone else who is getting these weird side-effects.
I'm trying to make a website and I want an image (1920 × 1080) to cover the whole page. I used:
background-repeat: no-repeat;
background-size: 100%;
And it looks fine. But when I resize my browser and pull it down vertically, the image does not come with it. I want my picture to resize for example like this site: https://www.okainsbayseafood.co.nz/ (when you resize the browser vertically the image goes with it)
Sorry for my English and if I sound stupid
my webpage
Switch background-size from 100% to cover:
background-size: cover;
This tells the browser that the image should fill the available space, and will alter the dimensions of the image to do so.
Note: If you are adding this CSS to an element that is not the body tag, you may need to add additional code to resize the element to which you are adding this background. This CSS will create the desired effect if added directly to the body element.
Actually you have many possibilities to get such a result:
The page you linked above uses so called breakpoints, where it loads a resized image based on the screen size. This is indeed a good idea in that case, because they use very large images, which would load forever on small screens and low bandwidth.
For you, as a beginner, it is probably better to firstly get some deeper knowledge into CSS and what you can do with just a single image, and after that you can opt in to optimisations like the site above. So for you something like that would probably work:
background-image: url("yourimage.jpg");
background-color: #cccccc; /* Used if the image can not be loaded */
height: 100vh; /* You must set a height. (unless you have child elements that take the entire space) */
background-position: center;
background-repeat: no-repeat;
background-size: cover; /* Resize the background image to cover the entire container */
Study that CSS code and make sure you understand what it does and what other options you have. You might play around with some values there and get some other results.
I'm having a big issue with something so "small" I can't figure it out and I'm reaching out to everyone here. The issue I'm having is this:
I have photos which are roughly 512px or 800px wide I want to fit, CENTERED, in a circle display area and keep my hover effects. I also need to size them the photos so the centered part shows a decent amount of the photo.
The current code I'm working with will make them perfect circles IF the photos are perfect squares. The problem is when the photo is a rectangle, it turns into an oval.
I had created a div like below using overflow:hidden and the css but it conflicted with the current CSS. Any help would be appreciated immensely!
.thumby {
width:200px;
margin: 0 auto;
overflow:hidden;
position: relative;
height: 200px;
border-radius: 100% 100% 100% 100%;
}
img.absolutely {
left: 50%;
margin-left: -256px;
top: 50%;
margin-top: -200px;
position:absolute;
width:512px;
}
Here's the link to my dev pages.
http://www.lmcodebox.com/b-test/index5.html
http://www.lmcodebox.com/b-test/portfolio.html
have you thought about setting the image as the background of the div? This way you keep all the effects you already use and there are ways to manipulate the background position without affecting the outside div. Other possible solution to have perfect round divs, is to use the ::after pseudo-class, like in this gallery tutorial:
http://webdesignerwall.com/tutorials/decorative-css-gallery-part-2
Sorry if I misunderstood you, hope it helps.
PS.: Beautiful test page by the way.
Well first, you'd only need to set the border radius to 50% to make something a circle, and if each corner is the same value, then you can just enter it once like so:
border-radius:50%;
As far as these images being rectangles goes, you could set your images as the background of a span, give it a height and a width that forms as square and use display block. This would keep the photos proportional, but allow you to make them square.
This however, could create a bit of a markup mess if you have a lot of images to display. Another solution, which means more work, but I would personaly do it, is to just crop your images into squares for their thumbnail with photoshop or some other image editing tool.
Above all of that, I don't see a width or height actually declared on the pages you linked. Are you sure you've placed them on the correct class? I see the border radius declared, but I'm only seeing a max-width: 100%; not width: 200px or height:200px
I re-thought the problem with the suggestion of using the images as backgrounds of an element as madaaah did above.
What I ended up doing was wrapping a DIV around my A tag like this:
then, I set the background of the A like this: style="background:url(PHOTO URL HERE) no-repeat;background-position:center;">
lastly, I made a square image (800 x 800) to go inside the A tag so it would keep the round shape and made it completely transparent so the background image is visible, while growing and shrinking in a "responsive" manner.
I have an JPG image with size 1024 x 724. My page size is not fixed.
My requirement is:
If I resize the page then the background image should also resize and fit to the page.
Also I don't want to keep the image related information in my Html page/JSP. I want to do this using plain CSS. I am not using CSS3. Because there is an attribute called background-size which can make the image stretch to the page width and height. Currently only Google Chrome supports this.
Any help ?
You can't resize background images with CSS2.
What you can do is have a container that resizes:
<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
<img src='whatever.jpg' style='width:100%;height:100%' alt='[]' />
</div>
This way, the div will sit behind the page and take up the whole space, while resizing as needed. The img inside will automatically resize to fit the div.
try something like
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
You can either use JavaScript or CSS3.
JavaScript solution: Use an absolute positioned <img> tag and resize it on the page load and whenever the page resizes. Be careful of possible bugs when trying to get the page/window size.
CSS3 solution: Use the CSS3 background-size property. You might use either 100% 100% or contain or cover, depending on how you want the image to resize. Of course, this only works on modern browsers.
Depending on what kind of image you have, it might be better to rework the design so that the main image fades to a set solid color or repeatable pattern. If you center the image in the page and have the solid color as the backgroud.
See http://www.webdesignerwall.com/trends/80-large-background-websites/ for examples of sites using large or scalable backgrounds.
These three line all together worked for me.
background-image: url("pages/images/backImage.png");
background-size: 100%;
background-repeat: no-repeat;
background:url(bgimage.jpg) no-repeat;
background-size: cover;
This did the trick
Hi I have a 1px png file,which I am trying to set as a background image for two divs which are adjacent to each other horizontally.The html and css are as under:-
<div id='one'>hi</div>
<div id='two'>hello</div>
The css is like this
div {
width: 50%;
height: 50%
}
#one, #two {
background-image: url(/images/image.png);
background-repeat: repeat;
}
Now the problem here is in between the two divs a black border automaticaly appears when the image is set. I dont want the two divs to be seen as separate blocks.Please help. Am totally new to css and need help:-)!
I'd be willing to bet that the image you are using has alpha transparency (that is, the image is partially transparent), and what you're seeing is a one-pixel overlap between the two divs. Either make sure that the container is an even number of pixels wide, or put the divs inside another container and use the background on that instead.
like robert, i'm also not getting the border, but i do get some repeats.
see if this works for you:
#one, #two{
background-image:url(99785.jpg);
background-repeat: no-repeat;
borders: 0
}
The problem is caused by a couple of interacting things.
First, make sure you are using the html strict doctype. This will help mitigate a lot of the formatting issues between browsers around divs. See alistapart for a description and list of real doctypes to use and quirksmode for a detailed comparison of them.
Second, you will more than likely have to set the margin of your divs to 0. Browsers have different default settings. A strict doctype will alleviate most of this, but there are usually other areas you have to overcome as well.
Also, you might want to grab firebug for firefox and leverage chromes dev tools. firebug will actually show you what all of the margins / padding / everything else is being set to. The Chrome tools don't give you a pretty picture with the details but you can see what the margins/padding/etc are in the Computed Style section.